newbie : js form validate inline

JavaScript로 유효성을 검사해야하는 양식을 만들었습니다. 이 게시물을 사용하려고하지만 결과 복제 할 수 없습니다 : 나는 지금까지 내 코드와 JSBin을 만들었습니다 inline javascript form validation newbie : js form validate inline

포함 CSS와 JS 파일 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 

<head> 
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> 
<title>xxx</title> 
<meta http-equiv="Content-Language" content="en-us" /> 
    <meta http-equiv="imagetoolbar" content="no" /> 

    <meta name="MSSmartTagsPreventParsing" content="true" /> 

<meta name="description" content="" /> 

<meta name="keywords" content="" /> 

<style type="text/css" media="all">@import "css/master.css";</style> <style type="text/css" media="all">@import "css/master.css";</style> 
<script src="contact.js" type="text/javascript"> 
</script> 
</head> 

<body> 

<div id="page-container">  

<div id="header"> <img src="images/header.jpg" width="900" height="243" /> 
</div> 

    <div id="main-nav"> 
    <ul id="navlist"> 
    <li id="active"><a href="index.html" >HOME</a></li> 
    <li><a href="req.html">REQUIREMENTS</a></li> 
    <li><a href="Links.html">LINKS</a></li> 
    <li><a href="feedback.html">TESTIMONIALS</a></li> 
    <li><a href="contact.html" id="current">CONTACT US</a></li> 

    </ul> 
    </div> 
    <p>&nbsp;</p> 

<div id="content"> 
<p><p><p>xxxxxxx welcomes all correspondence.<br /> 
    Please use the form below for any questions, feedback and suggestions.<br /> 
    or call &nbsp; <strong><em>xxx xxx </em> &nbsp;&nbsp;xxx.xxx.7009 </strong><br /> 
    All information is confidential<br /> 
<!-- <b>* required fields</b>--> 

<form onSubmit="return checkForm(); method="post" action="[email protected]" > 
<fieldset><strong>* required fields</strong> 
<legend>Contact Form</legend> 

<label for="name"> Name : <span class="required"></span></label> 

<div class="input"> 
    <input type="text" name="txtName" id="name" size="30" /><span class="message"></span> 
</div> 

<div class="error" id="emailError"> 
     Required: Please enter your email address 
    </div> 
    <div class="error" id="emailError2"> 
     This doesn't look like a real email address, please check and reenter 
    </div> 
     <label for="FieldData2"><strong> E-mail 
address * :</strong> 
</label> 

<div class="input"> 
<input type="text" name="FieldData1" id="FieldData2" value="" size="30" /><span class="message"></span> 
</div> 

<label for="comments"> <strong>Message * :</strong> 
</label><span class="message"></span> 

<div class="input"> 

<textarea name="Message" id="message" margin-left="20px" 
margin-bottom="20px" rows="18" cols="40"> 
</textarea> 

    <input type="submit" value="Send Message" name="submit" > 

</div> 

</fieldset> 
</form> 
</div> 

<div id="footer"> 

    <p>Copyrights 2013 xxx xxx &nbsp;|&nbsp; Web Design by xxx</p> 
</div> 

</body> 
</html>

: http://jsbin.com/oligol/1/edit

를이 내 HTML입니다

@charset "UTF-8"; 
/* CSS Document */ 

html, body { 
    margin: 0; 
    padding: 0; 
} 

body { 
    font-family: Arial, Helvetica, Verdana, sans-serif; 
    font-size: 14px; 
    background-image: url(../images/backgrd.jpg); 
} 

.hidden { 
    display: none; 
} 

#page-container { 
    width: 900px; 
    margin: auto; 
} 

#containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; left: 0; } 


#main-nav { 
    margin-top: -142px; 
    height: 40px; 
} 

#navlist { 
    margin-left: 290px; 
    padding:0; 
    text-align: left; 
} 

#navlist ul, #navlist li { 
margin: 0; 
padding: 0; 
color: #000000; 
font-family: Arial, Helvetica, Verdana, sans-serif; 
font-weight:bold; 
font-size: 16px; 
display: inline; 
list-style-type: none; 
} 

#navlist a:link, #navlist a:visited { 
    line-height: 20px; 
    margin: 0 10px 0 10px; 
    text-decoration: none; 
    color: #CDCDCD; 
} 

#navlist a:link#current, #navlist a:visited#current, 
#navlist a:hover { 
    border-bottom: 3px solid #000000; 
    padding-bottom: 2px; 
    background: clear; 
    color: #000000; 
} 


#header { 
    height: 243px; 
    background: #CDCDCD; 
    } 

#sidebar-a { 
    float: right; 
    width: 181px; 
    height: 441px; 
} 

#ftcredits { 
    text-align: left; 
    padding: 5px 0 5px 0; 
    font-family:Tahome, Arial, Helvetica, Sans-serif; 
    font-size: 11px; 
    color: #5d3b28; 
} 

#ftcredits a:link, a:visited { 
    color: #666633; 
    text-decoration: none; 

} 

#ftcredits a:hover { 
    color: #db6d16; 
} 

#content { 
    padding-left: 70px; 
    padding-right: 10px; 
    background: #CDCDCD; 
    overflow: hidden; 
} 

#footer { 
    font-family:Tahome, Arial, Helvetica, Sans-serif; 
    font-size: 11px; 
    color: #333333; 
    background: #CDCDCD; 
    padding: 1px 20px; 
    line-height: 13px; 
    border-top: 2px solid #5d3b28; 
} 

#footer a { 
    color: #003366; 
    text-decoration: underline; 
} 

#footer a:hover { 
    color: #003366; 
} 

h1 {color: #801F18; 
    font-family: Arial, Helvetica, Verdana, sans-serif; 
    font-size: 21px; 
    font-weight: bold; 
    text-align: center; 
    padding-bottom: 15px; 
} 


h2 { 
    color: #801F18; 
    font-size: 18px; 
    font-weight: bold; 
    text-align: center; 
    padding-bottom: 15px; 
} 

h5 { 
    font-size: 15px; 
    color: #663333; 
    line-height:150% 
} 

exc { 
    font-size: 17px; 
    color: #000000; 
    line-height:150% 
} 

p { 
    line-height:150% 
} 

h3 { 
    color: #666633; 
    font-family: Arial, Helvetica, Verdana, sans-serif; 
font-size: 11px; 
height: 350px; 
margin-top: -350px; 
margin-left: 460px; 
} 

hr { 
    width: 100%; 
    border-top: 2px solid #333333; 
    border-bottom: 0; 
    float: left; 
    line-height: 13px; 
} 
.double_column_list li {float:left; width:50%; 
} 

fieldset{ padding:10px; 
      width:600px; 
} 
label {width:170px; 
     float:left; 
     text-align:right; 
     clear:both; 
     margin-bottom:20px; 
    } 

.input {width:350px; 
     float:left; 
     margin-left:10px; 
     } 

error{ 
    } 

#content a { 
    color: #003366; 
    text-decoration: underline; 
    } 

#content h2 { 
    margin: 0; 
    padding: 0; 
    padding-bottom: 15px; 
} 

#content p { 
    margin: 0; 
    padding: 0; 
    line-height:150%; 
    padding-bottom: 15px; 
} 
.container1 { 
    display: inline; 
    float: left; 
    width: 320px; 
    height:200px; 
    padding: 10px; 
    margin-bottom: 20px; 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
    border: 1px solid #black; 
    zoom: 100%; 
    background-color: rgba(83,85,89,0.3); 
} 

.container2 { 
    width: 320px; 
    height:200px; 
    padding: 10px; 
    margin-left: 50px; 
    margin-bottom: 20px; 
    display: inline; 
    float: left; 
    /*-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
    border: 1px solid #black; 
    zoom: 100%; 
    background-color: rgba(83,85,89,0.3);*/ 

}

이 내 JS입니다 :

이 내 CSS입니다 17,451,515,

function checkForm() { 
    hideAllErrors(); 
    var formIsValid = 
    /*showErrorAndFocusIf('FieldData0', isEmpty, 'nameError')*/ 
    /*&&*/ showErrorAndFocusIf('FieldData2', isEmpty, 'emailError'); 
    showErrorAndFocusIf('FieldData2', isAnInvalidEmail, 'emailError2'); 
    /*&& showErrorAndFocusIf('FieldData3', isEmpty, 'categoryError')*/ 
    showErrorAndFocusIf('FieldData1', isEmpty, 'messageError'); 

    /* For debugging, lets prevent the form from submitting. */ 
    if (formIsValid) { 
    alert("Valid form!"); 
    return false; 
    } 

    return formIsValid; 
} 

function showErrorAndFocusIf(fieldId, predicate, errorId) { 
    var field = document.getElementById(fieldId); 
    if (predicate(field)) { 
    document.getElementById(errorId).style.display = 'inline'; 
    if (field.select) { 
     field.select(); 
    } 
    field.focus(); 
    return false; 
    } 

    return true; 
} 

function isEmpty(field) { 
    return field.value == ''; 
} 

function isAnInvalidEmail(field) { 
    var email = field.value; 

    var ok = "1234567890qwertyuiop[][email protected]_QWERTYUIOPASDFGHJKLZXCVBNM"; 

    for(i = 0; i < email.length; i++){ 
    if(ok.indexOf(email.charAt(i)) < 0) { 
     return true; 
    } 
    } 

    re = /(@.*@)|(\.\.)|(^\.)|(^@)|(@$)|(\.$)|(@\.)/; 
    re_two = /^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; 
    return re.test(email) || !re_two.test(email); 
} 



function hideAllErrors() { 
    /*document.getElementById("nameError").style.display = "none"*/ 
    document.getElementById("emailError").style.display = "none"; 
    document.getElementById("emailError2").style.display = "none"; 
    /*document.getElementById("categoryError").style.display = "none"*/ 
    document.getElementById("messageError").style.display = "none"; 
}

출처

2013-03-31 user2229604

몇 가지 포인트 :

귀하의 HTML이 유효하지 않습니다, 당신은 W3C Validator 같은 당신의 HTML을 확인해야한다.

요소 이름과 ID가 일치하지 않습니다. 예 : "이름"필드의 이름은 "txtName"이지만 ID는 "이름"이고 "전자 메일 주소"필드의 이름은 "FieldData "이지만 ID는 "FieldData "입니다. HTML과 JavaScript가 작성하고 이해하기 쉽도록 일관되고 분별력있는 이름을 사용하십시오.

checkForm 함수에서 AND 연산자 (& &)를 제거하면 JavaScript가 손상됩니다. showErrorAndFocusIf 함수는 지정된 필드가 유효 할 때 true 인 부울 값을 반환합니다. 전체 폼이 유효성 검사를 통과했는지 확인하기 위해 호출의 반환 값이 모든 유효성 검사 제약 조건에 대해 결합 된 것으로 가정됩니다.

마지막으로 JavaScript에서 사용 된 필드 및 오류 메시지의 ID가 HTML과 일치하지 않습니다. JavaScript는 DOM의 getElementById 함수를 사용하여 HTML의 필드 및 오류 메시지에 대한 참조를 검색하므로 코드가 작동하려면 ID가 일치하는지 확인해야합니다.

나는 새로운 JSBin에서 이러한 문제를 수정했습니다 http://jsbin.com/otinoz/2/edit

출처

2013-03-31 21:57:09 brianpeiris

세 가지가 지금 진행 .. 하나 난 당신이 나에게 다음 "의견"field..2에 적용 할 가르치는 것을 사용하려고합니다) 당신에게 천재 야 .3) 너의 아기를 갖고 싶다. – user2229604

newbie : js form validate inline

답변

관련 문제