자바 스크립트를 사용하여 HTML 텍스트 필드 유효성 검사

아래 붙여 넣은 코드에 따라 양식의 텍스트 필드 "사용자 이름"의 유효성을 검사하고 싶습니다. 유효성 검사는 사용자 이름 텍스트 필드를 필수로 만드는 것입니다.자바 스크립트를 사용하여 HTML 텍스트 필드 유효성 검사

내가 여기에 직면하고의 문제는 직접 "index.html을"다음 페이지로 이동하는 텍스트 필드의 유효성을 검사하고 온 클릭의 제출되지 않아요 버튼입니다. 다른 사람이 내 아래 코드에서이를 어떻게 해결할 수 있는지 제안 할 수 있습니까? 먼저 유효성 검사를 수행 한 다음 유효성 검사를 통과하면 사용자는 다음 페이지으로 이동할 수 있습니다.

내 코드 :

이

<html> 
<head> 
<script> 
//validation for username to be a mandatory field 
function ValidateContactForm() 
{ 
    var name = document.ContactForm.userid; 

    if (userid.value == "") 
    { 
     window.alert("Please enter your name."); 
     name.focus(); 
     return false; 
    } 


</script> 
<title> 
Login page 
</title> 
</head> 
<body> 
<h1 style="font-family:Comic Sans Ms;text-align="center";font-size:30pt; 
color:#00FF00;> 
<strong>Welcome</strong> 
</h1> 
<form name="login"> 
Username: <input type="text" name="userid "/><br/> 
Password: <input type="password " name="pswrd"/><br/><br/><br/><br/> 

</form> 
<HEAD> 
<TITLE>Test Input</TITLE> 
<SCRIPT LANGUAGE="JavaScript"> 
function testResults (form) { 
var TestVar = form.submit(); 
} 

</SCRIPT> 
</HEAD> 
<BODY> 
<form method="post" action="index.html" name="ContactForm" onsubmit="return ValidateContactForm();"> 
<input type="submit" value="Submit"> 
<input type="reset" value="Cancel"/> 
</form> 
</BODY> 
</HTML>

출처

2014-05-17 Dojo_user

는 syntex는 함수 ValidateContactForm() – user3091574

대신 (이 우회 될 수 실제로 양식을 확인하려면에 의존해서는 안) 양식을 검증하기 위해 자바 스크립트 사용자 정의를 사용하는 새를 사용할 수 있습니다 HTML5 required 속성을 텍스트 상자에 추가하여 클라이언트 측에서 필요하게 만듭니다. 그 helpful.How 내가의 요구 속성을 사용할 수 있습니다 될 수

출처

2014-05-17 10:57:12 The6P4C

당신이 샘플 코드로 날을 제공 할 수 있습니다를 error.close이되어 내 위의 코드에서 몇 가지 데모를 공유 할 수 있습니까? –

@ 도우 죠''를 사용하는 경우'required' 속성을 추가하여'', 당신은 수표를하지 않아도됩니다. 또한, 도움이된다면, @ or Eric의 대답을 받아주십시오. – The6P4C

내 코드에서 작동하지 않는 것이 이상합니다. 위 코드에서 대체 한 내용입니다.

. 그것이 작동해야하기 때문에 당신의 끝에서 작동하는지, 그것의 이상한 지 알 수 있습니까? –

<input type="text" id="userid" /> 
<input type="password" id="pswrd" /> 


$("form").submit(event, function() { 
    var userId = $("#userid"); 
    if (userId.val() == '') 
    { 
     alert("Please enter your name."); 
     userId.focus(); 
     event.preventDefault(); 
    } 
}

출처

2014-05-17 11:05:24 Eric

validateForm = function() { 
 
     return checkName(); 
 
    } 
 

 
    function checkName() { 
 
     var x = document.myForm; 
 
     var input = x.name.value; 
 
     var errMsgHolder = document.getElementById('nameErrMsg'); 
 
     if (input.length < 5) { 
 
      errMsgHolder.innerHTML = 
 
       'Please enter a name with at least 5 letters'; 
 
      return false; 
 
     } else if (!(/^\S{3,}$/.test(input))) { 
 
      errMsgHolder.innerHTML = 
 
       'Name cannot contain whitespace'; 
 
      return false; 
 
     }else if(!(/^[a-zA-Z]+$/.test(input))) 
 
     { 
 
     \t errMsgHolder.innerHTML= 
 
      \t \t \t 'Only alphabets allowed' 
 
     } 
 
     else if(!(/^(?:(\w)(?!\1\1))+$/.test(input))) 
 
     { 
 
     \t errMsgHolder.innerHTML= 
 
      \t \t \t 'per 3 alphabets allowed' 
 
     } 
 
     else { 
 
      errMsgHolder.innerHTML = ''; 
 
      return undefined; 
 
     }  
 
     
 
    }

.error { 
 
    color: #E00000; 
 
}

<form name="myForm" id="myForm" method="post" onsubmit="return validateForm();"> 
 
     First Name: <input type="text" id="name" /> <br /> 
 
     <span id="nameErrMsg" class="error"></span> <br /> 
 
     <!-- ... all your other stuff ... --> 
 
    </form> 
 
     <p> 
 
     1.word should be atleast 5 letter<br> 
 
     2.No space should be encountered<br> 
 
     3.No numbers and special characters allowed<br> 
 
     4.letters can be repeated upto 3(eg: aa is allowed aaa is not allowed) 
 
     </p> 
 
<button id="validateTestButton" value="Validate now" onclick="validateForm();">Validate now</button>

출처

2016-10-05 11:48:56 Hemangi

자바 스크립트를 사용하여 HTML 텍스트 필드 유효성 검사

답변

관련 문제