CODEWITHSUNDEEP
javascriptjqueryhtmljquery-validate
Khyana
Khyana

Reputation: 195

Validate fields using jquery

I'm creating a form that requires to enter some fields.

The basic required attribute won't work on me, so I would like to use jQuery.

Then when those fields were already filled, the submit button will be enabled.

here's my code:

$(function() {
    $('#catalog_order').validate(
    {
      rules:{
         schedule: {
          required: true
        }
      },
      messages:{
        schedule: "Please indicate schedule",
      }
    });
    
        $('#checkin input').on('keyup blur', function (e) { // fires on every keyup & blur
            
            if ($('#checkin').valid()) {
              $('#submit').attr('disabled', false);
            }
            else {
              $('#submit').attr('disabled', true);
            }
        });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>

<form role="form" id="checkin" name="checkin" method="post"> 

    <label for="dedicatalog"> Dedication Text: </label> <input type="text" name="dedicatalog" id="dedicatalog" size="20" placeholder="Dedication" /> <!-- NOT REQUIRED, but still disable  the CHECK IN NOW-->

    <label for="schedule"> Date: </label> <input type="date" id="schedule" name="schedule" value="M-D-YY"/> <!-- REQUIRED -->

    <label for="figurine_select"> Figurine/s: </label> <!-- NOT REQUIRED, but still disable  the CHECK IN NOW--> 
    <select name="figurine_sel" id="figurine_select" /> 

       <option selected value=" ">--Figurines--</option>
       <option value="angel">Angel</option>
       <option value="teletubies">Teletubies</option> 
    </select>
    <input type="submit" id="submit" class="btn btn-default" value="Check In Now" disabled="disabled" />

    </form>

Hope someone can help me out. Thank you!!

Upvotes: 1

Views: 123

Answers (3)

Bourbia Brahim
Bourbia Brahim

Reputation: 14702

This Fiddle Should work

Note that for every field you should specify all its option inside js object ( between brackets ) 

schedule: {
       required: true
},

Below working snippet

jQuery.validator.addMethod("dateFormat", function(value, element) {
    console.log(value,/^(0?[1-9]|1[0-2])\/(0?[1-9]|1[0-9]|2[0-9]|3[01])\/\d{2}$/.test(value));
    return /^(0?[1-9]|1[0-2])\/(0?[1-9]|1[0-9]|2[0-9]|3[01])\/\d{2}$/.test(value);
}, "Invalid Date !");

$(function() {
    $('#checkin').validate(
    {
      rules:{
        
        schedule: {
          required:true,
          dateFormat: true,
        }
      },
      messages:{
         required:"Required Field !"
      }
    });
    
        $('#checkin input').on('keyup blur', function (e) { // fires on every keyup & blur
            
            if ($('#checkin').valid()) {
              $('#submit').attr('disabled', false);
            }
            else {
              $('#submit').attr('disabled', true);
            }
        });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>

<form role="form" id="checkin" name="checkin" method="post"> 

<label for="dedicatalog"> Dedication Text: </label> <input type="text" name="dedicatalog" id="dedicatalog" size="20" placeholder="Dedication" />

<label for="schedule"> Date: </label> <input id="schedule" name="schedule" placeholder="M-D-YY"/> 

<input type="submit" id="submit" class="btn btn-default" value="Check In Now" disabled />

</form>

Upvotes: 1

Ikhlak S.
Ikhlak S.

Reputation: 9024

You can use the invalidHandler parameter to check for any invalid fields:

invalidHandler: function(event, validator) {
  var errors = validator.numberOfInvalids();
  if (errors) {
    $('#button').hide();
  } else {
    $('#button').show();
  }
}

Upvotes: 0

Haze
Haze

Reputation: 196

This is how I validate that. return false is just the same us disabling it

<form role="form" id="checkin" name="checkin" method="post"> 
    <input id="dedicatalog"/>
    <input id="date" type="date"/>
</form>

<script>
$('#checkin').on('submit', function() {
    var dedicatalog = $.trim($('#dedicatalog').val());
    var date = $.trim($('#date').val());

    if(dedicatalog == '' || date == '') {
    return false;
    }
});
</script>

Upvotes: 0

Related Questions