Question

我需要验证HTML表单中的姓名，房间号和电话号码字段。我为每个人编写了自定义规则，并在脚本中调用它们。但是当输入无效时，那些和默认的jQuery规则不会抛出错误。这是我的代码。

<script>
$(document).ready(function() {

jQuery.validator.addMethod("firstlastname", function(value, element){
    return this.optional(element) || (/^[a-z]([-']?[a-z]+)*( [a-z]([-']?[a-z]+)*)+$/.test(value));
}, "Please Enter Your First and Last Name");

jQuery.validator.addMethod("roomnumber", function(value, element){
    return this.optional(element) || (/^\d{3}\S{0,1}/.test(value));
}, "Invalid Room Number");

jQuery.validator.addMethod("phonenumber", function(value, element){
    return this.optional(element) || (/^\d{3}\-\d{3}\-\d{4}$ | ^\d{10} | ^\(\d{3}\)\d{3}\-\d{4}$/.test(value));
}, "Invalid Phone Number Format");


  $("#my_form").validate({

    rules: {
      name: {
            required: true,
            firstlastname: true
      },

      room_number: { 
            roomnumber: true
      },
      cell_phone: {
          required: true,
          phonenumber: true
      }
    },

    messages: {
        name: {
            required: "First and Last Name is Required",
            firstlastname: "Please Enter Your First and Last Name"
        },
        room_number: {
            roomnumber: "Invalid Room Number"
        },
        cell_phone: {
            required: "Phone Number is Required",
            phonenumber: "Please Enter a Valid Phone Number"
        }
    },

    errorPlacement: function(error, element) {
        if (element.attr("name") == "Name") {
            error.appendTo($("#nameValid"));
        } else if (element.attr("name") == "Room_Number") {
            error.appendTo($("#roomNumberValid"));
        } else if (element.attr("name") == "Cell_Phone") {
            error.appendTo($("#cellPhoneValid"));

        }
    } 
});
});

</script>

这是HTML

<form id="my_form" method="post" >
<p>Name:    </p>
<p>
  <input name="name" style="width: 275px" type="text"/>
  <span id="nameValid"></span>
</p>

<p>Room Number:</p>
<p>
  <input name="room_number" type="text" maxlength="5"/>
  <span id="roomNumberValid"></span>
</p>

<p>Cell Phone:</p>
  <p> <input name="cell_phone" style="width: 192px" type="text" maxlength="13"/> <br/>
<span id="cellPhoneValid"></span>
  </p>

我已经尝试了不同的jquery文件和jquery验证插件版本，它们都允许我提交无效输入。感谢您的帮助！

Answer 1

根问题是errorPlacement函数中的语法问题。与大多数JavaScript和HTML一样，name属性区分大小写。

当if (element.attr("name") == "Room_Number")实际为name时，

"room_number"永远不会起作用。

请改为尝试：

errorPlacement: function (error, element) {
    if (element.attr("name") == "name") {
        error.appendTo($("#nameValid"));
    } else if (element.attr("name") == "room_number") {
        error.appendTo($("#roomNumberValid"));
    } else if (element.attr("name") == "cell_phone") {
        error.appendTo($("#cellPhoneValid"));
    }
}

工作：http://jsfiddle.net/8KVHv/

虽然，我不确定为什么你有一个非常详细的自定义errorPlacement回调，它看起来与默认功能完全相同：http://jsfiddle.net/8KVHv/2/

如果您希望在span内部使用错误文本而不是默认的label元素，则可以使用the wrapper: "span" option。请参阅：http://jsfiddle.net/8KVHv/3/

BTW ：您可能不需要为电话号码编写自定义方法。也许只需使用additional-methods.js文件中的phoneUS规则。

请参阅：http://jsfiddle.net/8KVHv/1/

没有调用jQuery表单验证

1 个答案: