javascript - 使用 jquery 验证字段

Question

我正在创建一个需要输入某些字段的表单。

基本的 required 属性对我不起作用，所以我想使用 jQuery。

然后，当这些字段已填写时，将启用提交按钮。

这是我的代码:

$(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>

希望有人能帮助我。 谢谢!!

Answer 1

这个Fiddle应该可以工作

请注意，对于每个字段，您应该在js对象(括号之间)内指定其所有选项

schedule: {
       required: true
},

下面的工作片段

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>