在回发后,jquery不验证控件并允许提交

Question

我正在使用JQuery验证插件验证表单.

页面第一次加载时,表单将完美验证,并且只有在完成所有字段后才会提交.然后表单回发给自己,当尝试再次输入详细信息时,验证不起作用但仍然允许提交并且数据成功发送到数据库.

这是我的代码:

<form id="formSubmit" method="post" action="post to this page">


<fieldset data-role="fieldcontain">
            <p>
                <label for="clubSelect">Preferred Club</label>                  
                <select id="clubSelect" name="clubSelect" class="required">
                    <option value="000">Select a Club</option>
                    <?php if ($db->num_rows > 0)
                        {
                            foreach($results as $result)
                            {
                    ?>
                    <option value="<?php echo $result->id;?>"><?php echo $result->name;?></option>
                    <?php 
                            }
                        }
                    ?>
                </select>
                </fieldset>
            <fieldset data-role="fieldcontain">
                <label for="txtName">Name</label>
                <input type="text" id="txtName" name="txtName" class="required"/>
            </fieldset>
            <fieldset data-role="fieldcontain">
                <label for="txtEmail">Email</label>
                <input type="text" id="txtEmail" name="txtEmail" class="required email" minlength="5"/>
                    </fieldset>
                    <fieldset data-role="fieldcontain">
                <label for="txtCell">Contact Number</label>
                <input type="tel" id="txtCell" name="txtCell" class="required"/>
            </fieldset>
            <fieldset data-role="fieldcontain">
                <input type="submit" name="submit" value="Submit"/>

            </fieldset>
        </form>
<script>
$(document).ready(function () {
  $("#formSubmit").validate({
      rules: {
          clubSelect: {
              selectcheck: true
          },
          txtName: {
              required: true
          },
          txtEmail: {
              required: true
          },
          txtCell: {
              required: true,
              number: true
          }
      },
      messages: {
          txtName: {
              required: "Please enter your name."
          },
          txtEmail: {
              required: "Please enter your email address."
          },
          txtCell: {
              required: "Please enter your contact number.",
              number: "Only numbers are allowed."
          }
      }
  });
  jQuery.validator.addMethod('selectcheck', function (value) {
      return (value != '000');
  }, "Please select a club.");
});
</script>

基本上我要问的是如何确保验证始终有效.谢谢

Answer 1

更换

$(document).ready(function ()

同

$('#pagID').on('pageshow', function () {

更新:另外,添加data-ajax=false到表单div,以避免使用Ajax发布数据.

• jQuery移动事件
• 为什么不使用 .ready