클라이언트 측 JavaScript 유효성 검사가 작동하지 않습니다.

Question

이메일 유효성 검사에 처음입니다. 아무도 내가 제대로 작동하지 않는 이유를 알아낼 수 있습니다. 이름, 암호, 확인 암호, 전자 메일 및 URL 필드가 들어있는 간단한 양식이 있습니다. 이 필드들에 오류가 있으면 양식을 처리하고 싶지 않습니다. 오류가 나타나지 않으면 메시지를 표시하고 싶습니다 your form is submitted succesfully. 여기

는 코드입니다.

HTML :

이

<form id='contactForm'> 
    <label for='firstAndLastname'></label> 
    <input type='text' data-count='0' placeholder='Firstname Lastname' name='firstAndLastname' class='fName' /> 
    <span></span> 

    <label for='password'></label> 
    <input type='password' data-count='1' placeholder='Password' name='password' class='password' /> 
    <span></span> 

    <label for='confirmPassword'></label> 
    <input type='password' placeholder='Confirm Password' name='confirmPassword' class='confirmPassword' /> 
    <span></span> 

    <label for='email'></label> 
    <input type='email' data-count='2' placeholder='Email' name='email' class='email' /> 
    <span></span> 

    <label for='url'></label> 
    <input type='url' data-count='3' placeholder='Website' name='url' class='url' /> 
    <span></span> 

    <input type='submit' id='submit' value='Submit' /> 
</form> 

CSS :

이

input { 
    display: block; 
    margin: 10px 0; 
} 

자바 스크립트 :

//url validation 
function validateURL(url){ 
    var urlRegExp = /^(http|https):\/\/(([a-zA-Z0-9$\-_.+!*'(),;:&=]|%[0-9a-fA-F]{2})+@)?(((25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9]|[1-9][0-9]|[0-9])(\.(25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9]|[1-9][0-9]|[0-9])){3})|localhost|([a-zA-Z0-9\-\u00C0-\u017F]+\.)+([a-zA-Z]{2,}))(:[0-9]+)?(\/(([a-zA-Z0-9$\-_.+!*'(),;:@&=]|%[0-9a-fA-F]{2})*(\/([a-zA-Z0-9$\-_.+!*'(),;:@&=]|%[0-9a-fA-F]{2})*)*)?(\?([a-zA-Z0-9$\-_.+!*'(),;:@&=\/?]|%[0-9a-fA-F]{2})*)?(\#([a-zA-Z0-9$\-_.+!*'(),;:@&=\/?]|%[0-9a-fA-F]{2})*)?)?$/; 
    return urlRegExp.test(url); 
} 

//email validation 
function validateEmail(email){ 
    var pattern = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
    return pattern.test(email); 
} 

$('#submit').on('submit', function(e){ 
    var name = $.trim($('.fName').val()), 
    password = $.trim($('.password').val()), 
    confirmPassword = $.trim($('.confirmPassword').val()), 
    email = $.trim($('.email').val()), 
    url = $.trim($('.url').val()); 

    if (name === '' || password === '' || confirmPassword === '' || email === '' || url==='') { 
     e.preventDefault(); 
    } else if($('.password').val() !== $('.confirmPassword').val()) { 
     e.preventDefault(); 
    } else if(validateEmail($('.email').val() === false)){ 
     var el = validateEmail($('.email').val()); 
     console.log(el); 
     e.preventDefault(); 
    } else if(validateURL($('.url').val() === false)){ 
     e.preventDefault(); 
    } else { 
     console.log('bar'); 
     //$('.error-message').fadeIn('slow'); 
     e.preventDefault(); 
    } 
}); 

JS 빈 링크 : 내 대답을 변경했습니다 http://jsbin.com/dimam/1/edit?html,css,js,console,output

Answer 1

완전히 설명하기 뭐 나는 그것이 작동되도록하려면 여기를했다 :

http://jsfiddle.net/HPLXg/38/

1. 당신이 당신의 정규식 패턴 문자열의 끝에서 ;했다. 이러한 문자열 유형에는 필요하지 않습니다.
2. 잘못된 DOM 요소에 submit을 바인딩했습니다. 제출 버튼이 아닌 양식에 바인딩되어야합니다.
3. 콘텐츠가 live 콘텐츠로 DOM에 동적으로 추가되지 않기 때문에 실제로 .on() 함수를 사용할 필요가 없으며 단순히 .submit() 함수를 사용할 수 있습니다. 오히려 else if | else 진행보다, 각 필드는 개별적으로 선택되어이 방법으로 모든 오류가 한 번에 표시하는 대신 한 것
   • 각 if 문 자체를 확인했다 :
   • 은 또한 당신의 경우 제표에 기타 사소한 정리를 추가 사용자가
   • 을 제출할 때마다 오류가 발생하여 .submit() 함수의 변수 선언 영역에서 이미 수집 한 변수를 사용하도록 if 문의 모든 $(..).val() 참조가 변경되었습니다. 당신이 그들을 사용하지 않을 경우 값 변수를 만드는별로 포인트 ... 마지막으로
   • 하고, 규칙과 비 호환되는 필드를 표시하기 위해 귀하의 오류 몇 가지 색상을 추가