Question

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

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

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

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

希望有人可以帮助我。谢谢!!

Answer 1

此Fiddle应该有效

请注意，对于每个field，您应在js object内（括号内）指定其所有选项

schedule: {
       required: true
},

以下工作代码段

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这就是我验证的方法。 返回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 3

您可以使用border-collapse参数检查是否存在任何无效字段：

collapse

使用jquery

3 个答案: