Validate fields using jquery

Question

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!!

There is a similar thread over here: http://stackoverflow.com/questions/1594952/jquery-disable-enable-submit-button — , Feb 19 '17 at 12:50

Bourbia Brahim · Accepted Answer · 2017-02-27T07:25:29.603

1

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>

edited Feb 27 '17 at 07:25

answered Feb 19 '17 at 13:52

Bourbia Brahim

14,459
4
39
52

the submit button is still enable, how am i going to disable it first then once the fields are filled, I can click submit. – Khyana Feb 20 '17 at 04:26
I've managed to dis/enable button as your demand , please see above code :) – Bourbia Brahim Feb 20 '17 at 10:02
thank you, exactly what I needed. But when I've applied it to my real page only one field is enough for me to proceed. It's actually weird. ;_; – Khyana Feb 20 '17 at 16:28
What happened if I apply more fields to check? I managed to do the same method on the "rules" and "messages" ... I wonder what's wrong in here... – Khyana Feb 20 '17 at 16:31
Yes you can add as far as you want , name attributes in rules and messages , you said that's working on only one field are you sur to specify the name attribute in rules not id ! if so can you share an url to your site ! – Bourbia Brahim Feb 20 '17 at 20:51
Where can I upload the page of my codes? I've made it sure that they have the same name, that's why my label,ID and name where same. This what happens, the disable button is working. I did specify both rules&msgs, but it only works on my dedication field. I can easily proceed just putting dedication text. But i want to check all fields are filled. – Khyana Feb 21 '17 at 02:39
actually, i have an ajax code at the same time, do you think it's better for me to make it as one? I tried but I think the places of the codes I made were so wrong. Can you help me about that? I'll update my codes above about this. – Khyana Feb 21 '17 at 02:40
I can't figure where the matter , post more of your source to see. – Bourbia Brahim Feb 21 '17 at 07:36
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/136250/discussion-between-brimos-and-downcrow). – Bourbia Brahim Feb 21 '17 at 13:07
I think the matter is in the date format , input type date accept only format like dd/mm/yyyy or mm/dd/yyyy you should use this format , or crate validate regex method and check if input is correct without using type date here a working fiddle with other date format [Fiddle](https://jsfiddle.net/bRIMOs/oqym0c3j/) – Bourbia Brahim Feb 21 '17 at 20:26
can you help me out where I could do it? ...please? – Khyana Feb 22 '17 at 04:08

score 0 · Answer 2 · answered Feb 19 '17 at 13:07

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>

score 0 · Answer 3 · answered Feb 20 '17 at 10:10

0

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();
  }
}

answered Feb 20 '17 at 10:10

Ikhlak S.

8,578
10
57
77

Validate fields using jquery

3 Answers3