jQuery 폼 유효성 검사가 호출되지 않음

HTML 폼의 이름, 룸 번호 및 전화 번호 필드의 유효성을 검사해야합니다. 각각에 대한 맞춤 규칙을 작성하고 스크립트에서 호출했습니다. 그러나 입력이 유효하지 않은 경우에는 이러한 규칙과 기본 jQuery 규칙에서 오류가 발생하지 않습니다. 여기 내 코드가있다.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>

그리고 여기 내가뿐만 아니라 다른 JQuery와 파일 및 버전 플러그인 JQuery와 유효성을 실험 한 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>

그리고 그들은 모두 나를 잘못된 입력을 제출 할 수 있습니다. 사전에 도움을 주셔서 감사합니다!

출처

2013-04-01 Nathan Foss

이 코드 만 입력 유효성 검사에 대한 생각, 나는 같은 일을 완벽하게 작동하는 다른 프로젝트에서 매우 비슷한 코드를 – Hackerman

제출되는 양식을 막을 수 없습니다. 오류가 발생하면 제출 조치가 금지됩니다. –

다음은 공인 오류 또는 뭔가입니다 ... 다른 코드를 지침으로 사용하십시오. – Hackerman

루트 문제는 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/

오류 텍스트가인 경우 the wrapper: "span" option을 사용할 수 있습니다. 기본 label 요소 대신참조 : BTWhttp://jsfiddle.net/8KVHv/3/

을 : 당신은 아마 전화 번호에 대한 사용자 정의 메소드를 작성할 필요가 없습니다. additional-methods.js 파일 내에서 phoneUS 규칙을 사용하면됩니다.

참조 : http://jsfiddle.net/8KVHv/1/

출처

2013-04-01 21:01:19 Sparky

jQuery 폼 유효성 검사가 호출되지 않음

답변

관련 문제