JavaScript를 사용하여 onblur 및 submit 키를 눌러 양식의 유효성을 검사합니다.

JavaScript로 양식의 필드의 유효성을 검사하려고합니다. 필드는 사용자가 필드를 떠날 때 (onblur) 및 사용자가 submit을 누를 때 유효성을 검사해야합니다. 유효성 검사가 필수 필드에서 어떤 식 으로든 실패한 경우 양식을 보내지 않아야합니다.JavaScript를 사용하여 onblur 및 submit 키를 눌러 양식의 유효성을 검사합니다.

문제는 유효성 검사에 성공하면 유효성이 검사 된 필드 중 하나를 다시 작성하고 양식을 보내야한다는 JS 기능이 있다는 것입니다.

이 내 HTML입니다 :

<head> 
    <meta charset='UTF-8'> 

    <script type="text/javascript" src="./library/checkcreateuser.js"></script> 
    <script type="text/javascript" src="./library/hashcreateuser.js"></script> 
</head> 

<body> 
    <div class="maindiv"> 
     <form name="createform" id="createform" onsubmit="return formhash();" action="#" method="post"> 
      <input type="text" name="email" id="email" onblur="checkEmail()" placeholder="E-postadress" maxlength="50" /> 
      <label for="email" id="labemail"></label><br /> 
      <input type="text" name="testemail" id="testemail" onblur="checkEmailConfirm()" placeholder="Bekräfta e-postadress" maxlength="50" /><br /> 
      <label for="testemail" id="labtestemail"></label><br /> 
      <br /> 
      ... other input fields that should be validated, not yet written ... 
      <br /> 
      <input type="password" name="password" id="password" placeholder="Lösenord" maxlength="50" /><br /> 
      <label for="password" id="labpassword"></label><br /> 
      <input type="password" name="testpassword" id="testpassword" placeholder="Bekräfta lösenord" maxlength="50" /><br /> 
      <label for="testpassword" id="labtestpassword"></label><br /> 
      <br /> 
      <input type="submit" placeholder="Registrera" onclick="validateForm()"><br /> 
     </form> 
    </div> 
</body>

그리고 이것은 검증을 위해 내 자바 스크립트입니다 :

function checkEmail() { 
    var validemail = true; 

    var email = document.getElementById("email"); 

    var divided = email.split("@"); 

    var divlen = divided.length; 

    if (divlen != 2) { 
     validemail = false; 
     document.getElementById("labemail").innerHTML = "Felaktig e-postadress"; 
    } else { 
     document.getElementById("labemail").innerHTML = "<font color='#00cc00'>Korrekt epostadress</font>"; 
    } 

    // More code to validate Email to come 

    return validemail; 
} 

function checkEmailConfirm() { 
    var validtestemail = true; 

    var email = document.getElementById("email"); 
    var testemail = document.getElementById("email"); 

    if (testemail != email) validtestemail = false; 

    return validtestemail; 
} 


function validateForm() { 
    var validform = true; 
    var returnval = true; 

    validform = checkEmail(); 
    if (validform == false) returnval = false; 
    validform = checkEmailConfirm(); 
    if (validform == false) returnval = false; 

    return returnval; 
}

내 문제는 내가 이메일 - 또는 testemail 필드를 떠날 때 아무 변화가 없다는 것입니다.

내 두 번째 질문은 유효성 검사가 실패해도 제출되지 않은 양식이 제출되었지만 유효성 검사가 성공하면 formhash()라는 함수를 사용하여 해시 된 것입니다. 올바른 방법입니까?

편집 : 크롬 디버거를 사용하여, 나는 다음과 같은 오류가 있습니다

Uncaught TypeError: undefined is not a function: checkcreateuser.js:9 
checkEmail: checkcreateuser.js:9 
onblur: newuser.php:16

출처

2015-01-15 BluePrint

나는 여기에 넣어 줄께. nsideration : http://jqueryvalidation.org/ - 모든 것이 jQuery와 더 좋습니다. 디버거에서 실행될 때 문제가있는만큼 자바 스크립트를 밟았습니까? 일반적으로 모든 자바 스크립트 디버깅 프로세스에서 1 단계입니다. –

@JamesGaunt 문제는 내가 jQuery를 사용하지 않았고 JS도 거의 사용하지 않았다는 것과 내가 오늘 밤에 끝내야하기 때문에 jQuery를 배울 시간이 없다는 것이다. 디버깅에 관해서는 아무 생각도하지 않았습니다. 팁 고마워. – BluePrint

코드 검토,'validateForm'은 왜 하나의 라이너가 아닌지를 보여줄 짐승입니다 :'return (checkEmail() && checkEmailConfirm()); ' – Sukima

이메일에 입력 된 값을 확인하고 testemail하기를 당신은 사용해야합니다

var email = document.getElementById("email").value; 
    var testemail = document.getElementById("testemail").value;// then use split on these values.

당신이 경우 will use

var email = document.getElementById("email");//you will get error may be like split is not a function or something similar.

출처

2015-01-15 13:24:14

감사합니다. ! – BluePrint

JavaScript를 사용하여 onblur 및 submit 키를 눌러 양식의 유효성을 검사합니다.

답변

관련 문제