2016-06-08 2 views
2

내 HTML 양식에 입력 유효성 검사를 시행하고있다. 그러나 오류가 발생해도 사용자에게 메시지를 표시하지 않고 데이터를 테스트 서버로 전송합니다. 다음은 HTML 양식 확인 빈 필드

내 코드입니다 : 당신이 키 이벤트를 포함하는 키를 입력하기위한 onclick을 사용하고 onKeyUp에 필요 전에 발사하기 위해 지금까지 내가 그렇게 이해 양식을 제출할 때

<html> 
<head> 
    <style> 
     input {margin: 10px 5px 10px 5px;} 
     select {margin: 10px 5px 10px 5px;} 
    </style> 
    <script language="JavaScript"> 
    function validate(form1) 
    { if (form1.name.value == "" || form1.surname.value == "" || form1.email.value == "" || form1.dob.value == "") 
     { alert("One of the field is empty.") 
      form1.firstname.focus() 
      form1.firstname.select() 
      form1.lastname.focus() 
      form1.lastname.select() 
      form1.email.focus() 
      form1.email.select() 
      form1.dob.focus() 
      form1.dob.select() 

      return false 
     } 
    return true} 
    </script> 

</head> 
<body> 
    <form method="GET" action="http://www.test/cgi-bin/reply.pl" 
    onSubmit="return validate(this)"> 
     First Name<input type="text" name="firstname"><br> 
     Last Name<input type="text" name="lastname"><br> 
     Email Address<input type="email" name="email"><br> 
     Date of Birth<input type="date" name="dob"><br> 
     Favourite Sport 
     <select name="sports"><br> 
     <option value="athletics">Athletics</option><br> 
     <option value="basketball">Basketball</option><br> 
     <option value="cricket">Cricket</option><br> 
     <option value="football">Football</option><br> 
     <option value="hockey">Hockey</option><br> 
     <option value="swimming">Swimming</option><br> 
     <option value="tennis">Tennis</option><br> 
     </select><br> 
     <input type="Submit"> <input type="reset"> 
    </form> 

</body> 

</html> 
+0

: 빈 필수 입력으로 양식을 제출 사용자를 처리하는 한 가지 방법은 required 요소를 사용한다? –

답변

2

문제는 onsubmit을 사용할 때 코드가 제출 될 때까지 함수를 호출하지 않는다는 것입니다. form1.name입니다 무엇

<form> 
First Name<input type="text" name="firstname" required><br> 
<input type="Submit"> <input type="reset"> 
</form> 

https://jsfiddle.net/d43rLno5/

+0

감사합니다. 필요한만큼 잘 작동합니다! – gymcode

0

onSubmit이 발생

Form 'onsubmit' not getting called

Trigger a button click with JavaScript on the Enter key in a text box

그렇지 않으면 당신은 일어나기에서 기본 이벤트를 중지해야합니다 요하는 경우 u는 그런 다음 스크립트에 아약스 쿼리를 보낼 JQuery와 .post 방법을 사용할 수 있습니다 당신은

if (event.preventDefault) { 
    event.preventDefault(); 
} else { 
    event.returnValue = false; 
} 

와 기본 이벤트를 중지 할 수 있습니다 양식 작업이 바로

를 호출하지 않으