2014-09-12 2 views
0

나는 html 파일을 가지고 있으며 두 개의 비밀번호 필드 (비밀번호 & 비밀번호)를 확인하려고하는데이 샘플을 사용할 수없는이 특정 양식을 사용해야합니다. 여기 예제를 보았습니다. 그것은 지금까지 작동하지 않습니다 크로스 작업 예제를 와서 내가이 일을 얻기 위해 시도했지만, 나는이 새로운 그래서 난 코드비밀번호 확인 확인

에이 기능을 추가 한이

<div id="register" class="animate form"> 
<form action="mysuperscript.php" autocomplete="on"> 
<h1> Sign up </h1> 
<p> 
<label for="usernamesignup" class="uname" data-icon="u">Your username</label> 
<input id="usernamesignup" class="username" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690"> 
<span class="check" ></span> 
</p> 
<p> 
<label for="emailsignup" class="youmail" data-icon="e"> Your email</label> 
<input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="[email protected]"> 
</p> 
<p> 
<label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label> 
<input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"> 
</p> 
<p> 
<label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label> 
    <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" onkeyup="checkPasswordMatch(); placeholder="eg. X8df!90EO"> 
    </p> 
    <p class="signin button"> 
    <input type="submit" value="Sign up"> 
    </p> 
    <p class="change_link"> 
Already a member ? 
    <a href="#tologin" class="to_register"> Go and log in </a> 
</p> 
</form> 

에 나와 함께 기다려주십시오입니다

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
function checkPasswordMatch() { 
    var password = $("#passwordsignup").val(); 
    var confirmPassword = $("#passwordsignup_confirm").val(); 

    if (password != confirmPassword) 
     $("#register").html("Passwords do not match!"); 
    else 
     $("#register").html("Passwords match."); 
} 
</script> 

예제에 따르면 작동해야하지만 분명히 할 수 있습니다. 여기에 잘못된 것이 있으면 도움을 청하십시오.

+0

참고로 서버에서도 이러한 종류의 유효성 검사를 수행해야합니다 (참고로 FYI). – tymeJV

+2

@tymeJV 사용자의 브라우저에서 예비 검사를하는 것은 나쁘지 않습니다. – Nit

+1

#register는 비밀번호를 입력하는 전체 양식을 포함하는 div입니다 ... 오류 메시지로 삭제하지 마십시오. 게다가 ** 당신은 quote를 잊었습니다 ** : onkeyup = "checkPasswordMatch();" –

답변

1

이 줄이 엉망입니다.

onkeyup="checkPasswordMatch(); placeholder="eg. X8df!90EO"> 

큰 따옴표가 일치하지 않습니다.

1

게시 한 코드에서 onkeyup="checkPasswordMatch(); 이후에 "가 누락되었습니다.

+0

답장을 보내 주셔서 감사합니다. "하지만 여전히 작동하지 않습니다. – user3409828

+0

질문에 대한 의견에 나와있는대로 값을 확인하십시오.이 작업은 console.log (password); console.log (confirmPassword '); javascript의 값을 "if"조건 앞에 지정하면 값이 브라우저 콘솔에 표시됩니다. – MSTannu

1
<!DOCTYPE html> 
<html> 
<body> 
<div id="register" class="animate form"> 
<form action="mysuperscript.php" autocomplete="on"> 
<h1> Sign up </h1> 
<p> 
<label for="usernamesignup" class="uname" data-icon="u">Your username</label> 
<input id="usernamesignup" class="username" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690"> 
<span class="check" ></span> 
</p> 
<p> 
<label for="emailsignup" class="youmail" data-icon="e"> Your email</label> 
<input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="[email protected]"> 
</p> 
<p> 
<label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label> 
<input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"> 
</p> 
<p> 
<label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label> 
    <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"> 
    </p> 
    <div id="msg"></div> 
    <p class="signin button"> 
    <input type="submit" value="Sign up"> 
    </p> 
    <p class="change_link"> 
Already a member ? 
    <a href="#tologin" class="to_register"> Go and log in </a> 
</p> 
</body> 
<script src="jquery.js"></script> 
<script> 
$(document).ready(function(){ 
$("#passwordsignup_confirm").keyup(function(){ 
    var password = $("#passwordsignup").val(); 
    var confirmPassword = $("#passwordsignup_confirm").val(); 

    if (password !== confirmPassword){ 
     $("#msg").html("Passwords do not match!"); 
    }else{ 
     $("#msg").html("Passwords match."); 
    } 
}); 
}); 

</script> 
</html> 

위의 코드를 확인하십시오 !!

+0

@Raj 다시 답장을 보내 주셔서 감사합니다. 다른 자바 스크립트에서 변수를 확인해야합니까? 내 html 파일에 코드를 사용 했는데도 여전히 브라우저에서 아무 메시지도받지 못했습니다. – user3409828

+0

비밀번호 필드 옆에있는 chk. msg div에 메시지를 표시했습니다. 원하는 위치에 놓으십시오. –

+0

안녕하세요. @Raj, 나는 그것에 시간을 보냅니다. , 여기에 붙여 넣은 큰 스크립트는 전체 스크립트를 보내고 코드를 잘못 입력했는지, 너무 많이 묻는 지 말해 주시면 이해할 수 있습니다. – user3409828