Question

我在联系人字段的表单中使用了一个jQuery插件进行屏蔽输入。该插件工作得很好，只是因为我无法通过HTML5验证或jQuery验证来验证该特定字段（联系人字段）。

问题是即使在空输入框中也会提交联系人输入字段。它根本无法在required中将其标识为HTML5字段，使用“jQuery验证”也会产生相同的结果。我想jQuery Masked Input和HTML5/jQuery validations之间存在某种冲突。

我的代码是这样的：

<form action="" method="post" id="registration_form">

   <div class="container">

      <div class="div_left">Name <span class="red">*</span>   
           <input type="text" name="name" class="input_form" placeholder="Enter your Name" required>
      </div><br>
      <div class="div_left">Email <span class="red">*</span>   
           <input type="email" name="email" class="input_form" placeholder="Enter your Email" required>
      </div><br>
      <div class="div_left">Contact No. <span class="red">*</span>
           <input type="text" name="contact" class="input_form" class="required" id="jqxmaskedinput" required>
      </div><br>
      <div class="div_left">Nationality <span class="red">*</span>  
           <input type="text" name="nationality" class="input_form" placeholder="Enter your Nationality" required>
      </div><br>

   </div>

</div>

根据插件

的建议使用此jquery

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jqxcore.js"></script>
<script type="text/javascript" src="js/jqxmaskedinput.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        // Create jqxMaskedInput
        $("#jqxmaskedinput").jqxMaskedInput({ width: '308px', height: '23px', mask: '##########' });

    });
</script>

请帮忙！提前谢谢。

Answer 1

jQuery的：

$(document).ready(function () {
    var inputToMask = $("#jqxmaskedinput");
    // Create jqxMaskedInput
    inputToMask.jqxMaskedInput({ width: '308px', height: '23px', mask: '##########' });

    $('#registration_form').on('submit', function() {
        if ( $.trim(inputToMask.val()) == "") {
            alert ("empty field");
            return false;
        }
    });
});

html5 / jquery验证不适用于jquery输入掩码

1 个答案: