2014-02-14 7 views
0

경고 상자를 표시하는 방법을 알아 냈지만 다른 아이디어를 확인하는 다른 유효성 검사를 건너 뛰는 것처럼 보입니다. 그것은 정말로 도움이 될 것입니다!Javascript에서 유효성 검사가 작동하지 않습니다

var inputs = document.getElementsByName('Exam_Type');

var inputs = document.getElementsByName('examtype');

에 : 나는

<html> 
<head> 
<title>Exam entry</title> 
<script language="javascript" type="text/javascript"> 
window.validateForm=function() { 
    var result = true; 
    var msg = ""; 
    if (document.ExamEntry.name.value == "") { 
     msg += "You must enter your name \n"; 
     document.ExamEntry.name.focus(); 
     document.getElementById('name').style.color = "red"; 
     //result = false; 
    } 
    if (document.ExamEntry.subject.value == "") { 
     msg += "You must enter the subject \n"; 
     document.ExamEntry.subject.focus(); 
     document.getElementById('subject').style.color = "red"; 
     //result = false; 
    } 
    if (document.ExamEntry.Exam_Number.value == "") { 
     msg += "You must enter the exam Number \n"; 
     document.ExamEntry.subject.focus(); 
     document.getElementById('Exam_Number').style.color = "red"; 
     //result = false; 
    } 
    if (document.ExamEntry.Exam_Number.value.length != 4) { 
     msg += "You must enter at least Four Numbers in the Exam Number \n"; 
     document.ExamEntry.Exam_Number.focus(); 
     document.getElementById('Exam_Number').style.color = "red"; 
     //result = false; 
    } 
    var Number = document.ExamEntry.Exam_Number.value 
    if (isNaN(document.ExamEntry.Exam_Number.value)) { 
     msg += "You must enter at least four numeric characters in the Exam Number feild \n"; 
     document.ExamEntry.Exam_Number.focus(); 
     document.getElementById('Exam_Number').style.color = "red"; 
     //result = false; 
    } 
    var checked = null; 
    var inputs = document.getElementsByName('Exam_Type'); 
    for (var i = 0; i < inputs.length; i++) { 
     if (!checked) { 
      checked = inputs[i]; 
     } 
    } 
    if (checked == null) { 
     msg += "Anything for now /n"; 

    } else { 
     return confirm('You have chosen ' + checked.value + ' is this correct?'); 
    } 
    if (msg == "") { 
     return result; 
    } { 
     alert(msg) 
     return false; 
    } 
} 
</script> 
</head> 
<body> 
<h1>Exam Entry Form</h1> 
<form name="ExamEntry" method="post" action="success.html"> 
<table width="50%" border="0"> 
<tr> 
<td id="name">Name</td> 
<td><input type="text" name="name" /></td> 
</tr> 
<tr> 
<td id="subject">Subject</td> 
<td><input type="text" name="subject" /></td> 
</tr> 
<tr> 
<td id="Exam_Number">Exam Number</td> 
<td><input type="text" name="Exam_Number"<font size="1">(Maximum characters: 4)</font> </td> 
</tr> 
<tr> 

<table><form action=""> 

<td><input type="radio" id="examtype" name="examtype" value="GCSE" /> : GCSE<br /> 
<td><input type="radio" id="examtype" name="examtype" value="A2" /> : A2<br /> 
<td><input type="radio" id="examtype" name="examtype" value="AS"/> : AS<br /> 
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td> 
<td><input type="reset" name="Reset" value="Reset" /></td> 
</tr> 
</table> 
</form> 
</body> 
</html> 

and here is a jsfiddle

+4

무엇이 문제인지 잘 모르겠습니다. 크롬으로 코드를 실행했는데 유효성 검사가 작동합니다. 더 자세하게 얘기해 주 시겠어요? – Uri

+1

다른 유효성 검사를 건너 뛰면 무엇을 의미합니까? 그것은 파이어 폭스에서 나를 위해 올바른 메시지를 생산하는 것 같다 –

+0

바이올린을 준비하십시오. 그것은 단지 5 초를 cpy로 붙여 넣고 코드를 붙여 넣습니다. –

답변

0

for 루프가 라디오 버튼을 잘못 점검하고 있습니다.

코드 :/:

for (var i = 0; i < inputs.length; i++) { 
    if (inputs[i].checked) { 
     checked = inputs[i]; 
    } 
} 

내가 확인하시기 바랍니다 여기에 코드 변경 여기에 작업 바이올린 http://jsfiddle.net/sDLV4/2/

2

변경 당신에게 감사합니다, 자바 스크립트와 HTML 그래서 당신은 그것을 설명 할 수있는 상당히 새로운 오전라디오 요소의 이름을 잘못 선택 한 것 같습니다.

0

...

찾아주세요 여기에 작업 바이올린

HTTP를 찾아주세요 /jsfiddle.net/sDLV4/3/

+0

http://jsfiddle.net/sDLV4/3/ – Rajanikumar

0

HTML5 제약 조건 유효성 검사를 사용하면 코드의 상당 부분을 삭제할 수 있습니다. 아래의 개정판을 참조하십시오. 잘못된 라디오 버튼 그룹 이름 외에 유르겐를 분명하게 정하고 지적, 코드는 다음과 같은 문제가 있습니다

  1. 더 나은 대신 <script language="javascript" type="text/javascript">
  2. 그냥 <script>을 사용 아래 참조 HTML5의 DOCTYPE 선언을 사용합니다. script 요소에는 language 특성이없고 type 특성의 값은 기본적으로 "text/javascript"입니다.
  3. window 개체의 유효성 검사 기능을 정의하지만하지 마십시오 오히려 전역 함수 (아래)와 같은, 또는 바람직 네임 스페이스 개체의 구성원으로.
  4. 대신 양식의 name 속성을 "ExamEntry"을 설정하는 것이 아니라 그 id 속성을 설정 및 라인 79에, 때문에 양식의 테이블에, 귀하의 HTML 코드가 잘 형성되지
  5. var examForm = document.forms["ExamEntry"]; 같은 변수의 양식을 참조 두 테이블 요소 모두 끝 태그가없는 다른 양식 요소로 시작합니다.
  6. 또한 표 대신 양식 레이아웃을 사용하는 것이 좋습니다.

아래의 개정판에서는 스타일링 양식에 Pure CSS 스타일 시트를 사용하고 특정 요소에 해당하는 class 값을 사용하고 있습니다.

일반적으로 제약 조건 유효성 검사 및 HTML5 제약 조건 유효성 검사 기능에 대한 자세한 내용은 tutorial을 참조하십시오.

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title>Exam entry</title> 
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/0.3.0/base-min.css&pure/0.3.0/forms-min.css" /> 
<script> 
function validateForm() { 
    var result = true; 
    var msg = ""; 
    var checked = null; 
    var examForm = document.forms['ExamEntry']; 
    var inputs = examForm.examtype; 

    for (var i = 0; i < inputs.length; i++) { 
    if (!checked) { 
     checked = inputs[i]; 
    } 
    } 
    if (!checked) { 
    msg += "Anything for now /n"; 
    } else { 
    return confirm('You have chosen ' + checked.value + ' is this correct?'); 
    } 
    if (msg == "") { 
    return result; 
    } else { 
    alert(msg) 
    return false; 
    } 
} 
</script> 
</head> 
<body> 
<h1>Exam Entry Form</h1> 
<form id="ExamEntry" class="pure-form pure-form-aligned" method="post" action="success.html"> 
    <div class="pure-control-group"> 
    <label for="exNo">Exam Number:</label> 
    <input id="exNo" name="Exam_Number" required="required" pattern="\d{4}" title="You must enter a 4-digit exam number" /> 
    </div> 
    <div class="pure-control-group"> 
    <label>Exam type:</label> 
    <label class="pure-radio"><input type="radio" name="examtype" value="GCSE" /> GCSE</label> 
    <label class="pure-radio"><input type="radio" name="examtype" value="A2" /> A2</label> 
    <label class="pure-radio"><input type="radio" name="examtype" value="AS" /> AS</label> 
    </div> 
    <div class="pure-controls"> 
    <button type="submit" class="pure-button pure-button-primary" onclick="return validateForm();">Submit</button> 
    <button type="reset" class="pure-button">Reset</button> 
    </div> 
</form> 
</body> 
</html> 
+0

교과 과정이므로 HTML5를 학교에 보내지 않아도되며, 코드를 사용해야합니다. 더 힘들어 짐, 아이디어가 있습니까? – Jamie

관련 문제