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不验证控件并允许提交

1 个答案: