자바 스크립트 간단한 유효성 검사가 작동하지 않습니까?

Question

누구든지이 간단한 자바 스크립트가 작동하지 않는 이유를 알고 있습니까? 클래스 "t1"의 css를 display : none에서 display : inline으로 변경하여 입력이 비어있을 때 표시되도록 설정합니다. 제출

왜 작동하지 않는지 이해할 수 없습니까?

function validate() { 

if(document.quote.firstname.value == "") 

{document.getElementByClassName('t1').style = 'display: inline;'; 
    } 

} 

HTML :

<form name="quote" method="post" action="" onSubmit="validate();"> 

<fieldset> 
<legend>Contact Information</legend> 

<div> 
<label>*First Name:</label><span class="t1">Please enter your name</span> 
<input name="firstname" type="text"/> 
</div> 

</fieldset> 

<div id="f-submit"> 
<input name="Submit" value="Submit" type="submit"/> 
</div> 

</form> 

CSS 당신이 찾아 낼 수있는 경우에

은 어디에 문제가

자바 스크립트 (BTW 난 순수 자바 스크립트에서 이것을 유지하려는) 정말 고마워요 :

.t1{ 
display: none; 
font-size:13px; 
color: #F33; 
text-align: right; 
} 

Answer 1

제안 1 : 당신이

그들을 쉽게 액세스 할 수 있도록 ID가 태그에 속성을 넣어

제안 2 : onsubmit 속성을 onsubmit="return validate()"

로 지정하십시오.

제안 3 : getElementByClassName이 없습니다. getElementsByClassName은 배열을 반환하므로 어떤 배열을 선택하거나 반복해야합니다. IE, document.getElementsByClassName('t1')[0]

제안 4 : 양식을 제출하지 않으려면 validate 함수가 false를 반환하고 제출해야하는 경우 true를 반환해야합니다.

자바 스크립트 :

function validate() { 

    if(document.getElementById("firstname").value == "" || document.getElementById("firstname").value == null) 
    { 
    document.getElementsByClassName('t1')[0].setAttribute('style','display: inline;'); 
    return false; 
    } 
    return true; 
} 

HTML :

내가 그것을 확장

<form name="quote" method="post" action="" onSubmit="return validate()"> 

<fieldset> 
<legend>Contact Information</legend> 

<div> 
<label>*First Name:</label><span class="t1">Please enter your name</span> 
<input id="firstname" name="firstname" type="text"/> 
</div> 

</fieldset> 

<div id="f-submit"> 
<input name="Submit" value="Submit" type="submit"/> 
</div> 

</form> 

Answer 2

document.getElementByClassName이 없습니다. getElementsByClassName을 의미합니까? 스타일 속성이 아닌 display 스타일을 직접 설정해야합니다. 또한 양식 제출을 취소해야하는 경우 제출시 validate()를 반환하고 취소하려면 false를 반환해야합니다. 나는 그것을 바이올린에도 넣었다.

은 나뿐만 아니라 당신을 위해 jsFiddle을했습니다 : http://jsfiddle.net/rgthree/g4ZvA/2/

<form name="quote" method="post" action="" onSubmit="return validate();"> 

JS :

function validate() { 
    if(document.quote.firstname.value == ""){ 
    document.getElementsByClassName('t1')[0].style.display = 'inline'; 
    return false; // Return false will cancel the submit, causing the page to not load the form action action 
    } 
    return true; 
}