Question

好的，所以我基本上只是将这个例子用于Jquery网站的jquery验证手机US插件 - 它看起来很有用（有些帖子不是这样）。

我的问题是，如何在成功时“提交”表格？我显然是jQuery和Javascript的新手。使用没有插件的正常jQuery验证，它看起来相当简单 - 但我不确定如何做到这一点。这是代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
});;
</script>

  <script>
  $(document).ready(function(){
    jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
    phone_number = phone_number.replace(/\s+/g, ""); 
    return this.optional(element) || phone_number.length > 9 &&
        phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid phone number");

$("#testinput").validate({
  rules: {
    field: {
      required: true,
      phoneUS: true
    }
  }
});

  });
  </script>
  <style>#field { margin-left: .5em; float: left; }
    #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
    br { clear: both; }
    input { border: 1px solid black; margin-bottom: .5em;  }
    input.error { border: 1px solid red; }
    label.error {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
        padding-left: 16px;
        margin-left: .3em;
    }
    label.valid {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
        display: block;
        width: 16px;
        height: 16px;
    }
</style>
</head>
<body>

<form id="testinput" action="http://transworldmx.com">
  <label for="field">Required, us phone number: </label>
  <input class="left" id="field" name="field" />
  <br/>
  <input type="submit" value="Validate!" />
</form>

</body>
</html>

Answer 1

您的jQuery代码只是检查电话号码是否是电话号码（通过正则表达式），并确保该字段是必需的。应用这些规则后，只需点击“验证！”即可。按钮提交表单。您需要一些服务器端脚本（如PHP）来处理表单数据。

Answer 2

如果验证通过，表单应自动提交。如果没有，则验证失败，或者存在一些JavaScript错误...使用FireBug或IE开发工具（F12）进行故障排除！

jQuery验证 - 电话美国成功提交？

2 个答案: