Validate Textbox Javascript

-1

로그인 Xhtml에서 텍스트 상자의 유효성을 검사하려고하는데 코드에서 섹션 클래스 '컨테이너'가 작동하지 않으면 확인했습니다.Validate Textbox Javascript

코드를 작성하고 텍스트 상자의 유효성을 올바르게 검사하려면 어떻게해야합니까?

<head> 
    <script type = 'text/javascript'> 
function validate() { 
     if (document.getElementById("login").value == "") { 
      alert("User name may not be blank"); 
     } else if (document.getElementById("password").value == "") { 
      alert("Password may not be blank."); 
     } 
    } 
</script> 
    <title>Login Form</title> 
    <link rel="stylesheet" href="css/style.css"/> 

</head> 

<body> 
    <h1> Login</h1> 
    <section class="container"> 
    <div> 

     <form method="post" action="index.xhtml" onsubmit="return validate();"> 

      <p> 
<input type="text" name="login" value="" id="login" placeholder="Username or Email" /> 

<input type="password" name="password" value="" id="password" placeholder="Password" /> 
</p> 
<p> 
    <label> 
     <input type="checkbox" name="remember_me" id="remember_me" />Remember me on this computer</label> 
</p> 
<p class="submit"> 
    <input type="submit" name="commit" value="Login" onclick="validate();" /> 
    <button type="reset" value="Clear">Clear</button> 
</p> 

     </form> 
     <form action= "http://localhost:8080/ChattBank/LoginServlet" method="post"/> 
    </div> 

    </section> 

</body> 

</html>

출처

2014-09-26 helpmeimnoob

편집

하면이 시도 :

여기

<input type="text" name="login" value="" id="login" placeholder="Username or Email" /> 
<input type="password" name="password" value="" id="password" placeholder="Password" /> 
</p> 
<p> 
    <label> 
     <input type="checkbox" name="remember_me" id="remember_me" />Remember me on this computer</label> 
</p> 
<p class="submit"> 
    <input type="submit" name="commit" value="Login" onclick="validate();" /> 
    <button type="reset" value="Clear">Clear</button> 
</p> 
<script> 
    function validate() { 
     if (document.getElementById("login").value == "") { 
      alert("User name may not be blank"); 
     } else if (document.getElementById("password").value == "") { 
      alert("Password may not be blank."); 
     } 
    } 
</script>

가 작동 fiddle

출처

2014-09-26 02:04:48

구현했지만 여전히 작동하지 않습니다. 무엇이 잘못 되었습니까? – helpmeimnoob

@SpencerWieczorek 바이올린에는 어떤 다른 문제가 있습니까? 그것은 나를 위해 잘 작동합니다. –

@ JohnroePauloCañamaque 이제 값을 올렸을 때 양식 제출 만 추가하면됩니다. –

우리는 document.getElementById("login")를 사용하려고

및 document.getElementById("password")입니다 (이 함께 양식을 교체)하는 모두 null입니다. 귀하의 두 입력 필드가 속성으로 id을 가지고 있지 않기 때문에.

이

<input type="text" ... id="login" /> 
... 
<input type="password" ... id="password" />

는 또한 validate()에 속성이 필요 없기 때문에 login 입력에 this을 통과하지 못한 : 당신은 추가해야합니다.

출처

2014-09-26 02:05:41

jquery validation을 사용할 수 있습니다. 매우 간단합니다.

<form method="post" action="index.xhtml" id="loginForm"> 
... 
</form> 
$("#loginForm").validate({ 
    rules: { 
     "login": { 
      required: true 
     }, 
     "password": { 
      required: true 
     }, 
    messages: { 
     "login": "This field is required", 
     "password": "This field is required", 
    }, 
});

출처

2014-09-26 03:49:33

Validate Textbox Javascript

답변

관련 문제