困惑的新手：js表单验证内联

时间：2013-03-31 17:15:52

标签： javascript html

我构建了一个需要使用JavaScript验证的表单。我尝试使用此帖子，但无法复制结果：inline javascript form validation

到目前为止，我已经使用我的代码创建了一个JSBin，包括CSS和JS文件：http://jsbin.com/oligol/1/edit

这是我的HTML：

<!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="xxx@gmail.com" >
 <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>

这是我的CSS：

@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：

  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[]asdfghjklzxcvbnm.@-_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";
}

1 个答案:

答案 0 :(得分：1)

几点：

您的HTML无效，您应该像W3C Validator那样查看HTML。

元素名称和ID不一致。例如。您的“名称”字段名为“txtName”，但ID为“name”，您的“电子邮件地址”字段名为“FieldData 1 ”，但ID为“FieldData 2 < /强>”。使用一致且合理的名称，以便HTML和JavaScript易于编写和理解。

您通过删除checkForm函数中的AND运算符（＆amp;＆amp;）来破坏JavaScript。 showErrorAndFocusIf函数返回一个布尔值，当指定的字段有效时该值为true。应该为所有验证约束组合调用的返回值，以确定整个表单是否已通过验证。

最后，JavaScript中使用的字段和错误消息的ID与HTML不匹配。 JavaScript使用DOM的getElementById函数来检索对字段的引用和HTML中的错误消息，因此您必须确保id匹配才能使代码生效。

我在新的JSBin中纠正了这些问题：http://jsbin.com/otinoz/2/edit

相关问题
最新问题