Enable / Disable button according to field validation

Question

Enable / Disable button according to field validation

Navigation

#1 by (2 votes)
#2 by (1 votes)

4

I'm performing date validation for two <input type="text"> fields with jQueryFormValidator :

        $.validate({
            modules : 'date'
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="http://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.47/jquery.form-validator.min.js"></script>

<form>

<input type="text" class="form-control" name="Tdesl"  maxlength="10" data-validation="date" data-validation-format="dd/mm/yyyy" placeholder="dd/mm/aaaa" OnKeyPress="formatar('##/##/####', this)" id="Cdesl22"></label>

    <input class="form-control" type="text" data-validation="date" data-validation-format="dd/mm/yyyy" maxlength="10" placeholder="dd/mm/aaaa" OnKeyPress="formatar('##/##/####', this)" name="Tinsem3" id="Cinsem"></label>

</form>

But I can not make sure that, when these fields are validated, a button ( <button="button"> is not a submit ) is enabled.

According to some answers I saw in SOen, jQueryFormValidator does not have native support for this function, so I'm trying to adapt this script (the link is from FIDDLE, but I found it by SOen):

    $('#myform > input').on('input', function () {
        var empty = false;
        $('form > input, form > select').each(function () {
            if ($(this).val() == '') {
                empty = true;
            }
        });
    
        if (empty) {
            $('#register').attr('disabled', 'disabled');
        } else {
            $('#register').removeAttr('disabled');
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formid="myform">Username
    <br />
    <input type="text" class="class" id="user_input" name="username" />
    <br />Password
    <br />
    <input type="password" id="pass_input" name="password" />
    <br />Confirm Password
    <br />
    <input type="password" id="v_pass_input" name="v_password" />
    <br />Email
    <br />
    <input type="text" id="email" name="email" />
    <br />Birthday
    <br />
    <input type="date" id="bday" name="birthday" />
    <br />Sex
    <br />
    <select name="sex" id="sex">
        <option>Male</option>
        <option>female</option>
    </select>
    <input type="submit" id="register" value="Register" disabled="disabled" />
</form>

However, this script requires that all input fields be filled in, and I need only two fields (there are more fields in the form, and only two of them must be observed). I tried to create a class to apply in these two fields, but I think I did not do it right:

$('#myform > .classinput').on('input', function () {

In addition, this script uses type date , while in my case I am using fields of type text , but are being validated for date, so if it was possible to use the result of the validation (to enable the button ) would be ideal, but otherwise der can be only with the basic rules, type accept for the day maximum 31, month 12, year 2015, etc.

javascript html jquery html5 jquery-validate

asked by anonymous 29.05.2015 / 01:16

2 answers

2

I made a change with class obrig for validated fields:

$('#myform > input').on('input', function () {
    var empty = false;
    $('form > .obrig').each(function () {
        if ($(this).val() == '' ) {
            empty = true;
        }else {
            empty = false;
        }
    });
     if (empty) {
        $('#register').attr('disabled', 'disabled');
    } else {
        $('#register').removeAttr('disabled');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formid="myform">Username
    <br />
    <input type="text" class="obrig" id="user_input" name="username" />
    <br />Password
    <br />
    <input type="password" class="obrig"  id="pass_input" name="password" />
    <br />Confirm Password
    <br />
    <input type="password" id="v_pass_input" name="v_password" />
    <br />Email
    <br />
    <input type="text" id="email" name="email" />
    <br />Birthday
    <br />
    <input type="date" class='obrig' id="bday" name="birthday" />
    <br />Sex
    <br />
    <select name="sex" id="sex">
        <option>Male</option>
        <option>female</option>
    </select>
    <input type="submit" id="register" value="Register" disabled="disabled" />
</form>

29.05.2015 / 01:44

C # converter for JavaScript: ((object) sender). attribute Help with PHP Replication Structure - PARSER - simple_html_dom.php

score 1 · Accepted Answer

Let's see

From jQuery I understand almost nothing - I prefer my code in pure JavaScript (without frameworks ). I ended up learning a lot of jQuery trying to solve your problem. And in the end, I think it was fixed ..

Explanation

Here's a brief explanation of the code and process. It may make it easier to understand.

No JS

I added $.validate(); because I needed to check if the date check worked correctly with the code, obviously;
In $.validate(); , I added return(false) to prevent the submission of the form in case there are other checks of other elements of the form;
Within the scope of $('form > .checarData') , I added .on('validation', ... so that there was a way to determine the activation of the button;

No HTML

the ID element #aniv2 serves as the mirror of the ID element #aniv1 . That is, what you have in #aniv1 will have #aniv2 .

In case, the more dates to be validated you had, each of them will have to have a mirror element. Why?

See : jQuery Form Validator requires that the type attribute be equal to text as you yourself said. MAS , after the form is submitted, you will need it to be type date .

So , having the two elements, being a mirror of the other, you can validate the date and still get the form with the 'birthday' field of type date to format on the destination page, whatever . And as one of them is hidden, the user will not see this mirror element.

Code & Example

$.validate({
    modules: 'date',
    onSuccess: function () {

        /* Impede o envio do formulário */
        return (false);

    }
});

/* 'form' é a TAG mesmo */
$('form > .checarData').on('validation', function (evt, valid) {

    /* Copia #aniv1 em #aniv2 */
    document.getElementById("aniv2").value = document.getElementById("aniv1").value;
    
    /* Verifica se o campo não está vazio E SE a data está OK */
    if (valid) {
        $('#registrar').removeAttr('disabled');
    } else {
        $('#registrar').attr('disabled', 'disabled');
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="http://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.47/jquery.form-validator.min.js"></script>

<form id="formulario">

  Usuário
  <br />
  <input type="text" id="user" name="username" />

  <br />Email
  <br />
  <input type="text" id="email" name="email" />

  <br />Aniversário
  <br />
  <input type="text" id="aniv1" name="aniv1" class="checarData" data-validation="birthdate" data-validation-format="dd/mm/yyyy" />

  <!-- Espelho de #aniv1, porém do tipo "date" -->
  <input type="date" id="aniv2" name="aniv2" hidden="hidden" />

  <br />

  <input type="button" id="registrar" value="Registrar" disabled="disabled" />

</form>

Notes

You should understand jQuery enough to know how to enter .on('input', ... instead of .on('blur', ... . I really am not the master of this framework and have never used it directly professionally - only when it appears in third-party libraries on systems not developed by me.

Ah! Just in case, JSFiddle to ensure!

I hope I have helped!