使用 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

我就是这样验证的。 return false 和我们禁用它一样

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

Answer 2

这个 Fiddle 应该有效

请注意，对于每个 field，您应该在 js object（括号之间）

内指定其所有选项

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>

Answer 3

您可以使用 invalidHandler 参数检查任何无效字段：

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

使用 jquery 验证字段

Validate fields using jquery

html

javascript

jquery

jquery-validate