JavaScript内联验证不起作用

Question

I'm trying Javascript inline form validation for the first time. 我第一次尝试使用Javascript内联表单验证。 I borrowed the code from another website and have done everything suggested to get it correct but it's still not working. 我从另一个网站借来了代码，并做了建议的所有操作以使其正确，但是仍然无法正常工作。 It's supposed to turn the form box red if info is wrong and print a message underneath the incorrect box and turn it green if the info entered is correct. 如果信息有误，应该将表单框变成红色，并在不正确的框下打印一条消息，如果输入的信息正确，则将其变成绿色。 Please help. 请帮忙。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Request Info</title>
<link href="bnb stylesheet.css" rel="stylesheet" type="text/css" />

<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans:400,700,800' rel='stylesheet' type='text/css'>

<style type="text/css">

.sidebar1 {
    float: right;
    width: 180px;
    background-color: #9CBEEF;
    padding-bottom: 10px;
}
</style>

  <script>
  //Script validation coding borrowed from Philip Brown on Culttt.com

//culttt.com/2012/08/08/really-simple-inline-javascript-validation/

//Validation

    function validateName(x){
      // Validation rule
      var re = /[A-Za-z -']$/;
      // Check input
      if(re.test(document.getElementById(x).value)){
        // Style green
        document.getElementById(x).style.background ='#ccffcc';
        // Hide error prompt
        document.getElementById(x + 'Error').style.display = "none";
        return true;
      }else{
        // Style red
        document.getElementById(x).style.background ='#e35152';
        // Show error prompt
        document.getElementById(x + 'Error').style.display = "block";
        return false; 
      }
    }

    function validateName(lname){
      // Validation rule
      var re = /[A-Za-z -']$/;
      // Check input
      if(re.test(document.getElementById(lname).value)){
        // Style green
        document.getElementById(lname).style.background ='#ccffcc';
        // Hide error prompt
        document.getElementById(lname + 'Error').style.display = "none";
        return true;
      }else{
        // Style red
        document.getElementById(lname).style.background ='#e35152';
        // Show error prompt
        document.getElementById(lname + 'Error').style.display = "block";
        return false; 
      }
    }

    // Validate email
    function validateEmail(email){ 
      var re = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
      if(re.test(document.getElementById(email).value)){
        document.getElementById('email').style.background ='#ccffcc';
        document.getElementById('emailError').style.display = "none";
        return true;
      }else{
        document.getElementById('email').style.background ='#e35152';
        return false;
      }
    }

//Validate phone    
       function validatePhone(phone){
      // Validation rule
      var re = /[0-9-']$/;
      // Check input
      if(re.test(document.getElementById(phone).value)){
        // Style green
        document.getElementById(phone).style.background ='#ccffcc';

        //Validate Comments
           function validateComment(x){
      // Validation rule
      var re = /[A-Za-z -']$/;
      // Check input
      if(re.test(document.getElementById(comment).value)){
        // Style green
        document.getElementById(comment).style.background ='#ccffcc';
        // Hide error prompt
        document.getElementById(x + 'Error').style.display = "none";
        return true;
      }else{
        // Style red
        document.getElementById(x).style.background ='#e35152';
        // Show error prompt
        document.getElementById(x + 'Error').style.display = "block";
        return false; 
      }
    }
        // Hide error prompt
        document.getElementById(x + 'Error').style.display = "none";
        return true;
      }else{
        // Style red
        document.getElementById(x).style.background ='#e35152';
        // Show error prompt
        document.getElementById(x + 'Error').style.display = "block";
        return false; 
      }
    }
    // Validate Select boxes
    function validateCheckbox(terms){
      if(document.getElementById(terms).checked){
        return true;
      }
      return false;
    }   
    function validateForm(){
      // Set error catcher
      var error = 0;
      // Check name
      if(!validateName('name')){
        document.getElementById('nameError').style.display = "block";
        error++;
      }

      //Validate last name
       if(!validateName('lname')){
        document.getElementById('nameError').style.display = "block";
        error++;
      }

      //Validate phone
      if(!validatePhone('phone')){
        document.getElementById('phoneError').style.display = "block";
        error++;
      }
      // Validate email
      if(!validateEmail(document.getElementById('email').value)){
        document.getElementById('emailError').style.display = "block";
        error++;
      }

     //Validate message
     if(!validateComment('comment')){
        document.getElementById('commentError').style.display = "block";
        error++;
      } 

//Validate Checkbox
      if(!validateCheckbox('terms')){
        document.getElementById('termsError').style.display = "block";
        error++;
      }
      // Don't submit form if there are errors
      if(error > 0){
        return false;
      }
    }     
  </script>


</head>

<body>

<div class="container">
  <div class="header"><a href="Request Info.html"><img src="images/logo 3.png" alt="Insert Logo Here" name="Insert_logo" width="980" height="200" id="Insert_logo" style="background-color: #9cbeef; display:block;" /></a>
    </div>

   <div id="navcontainer">
<ul id="navlist1">
<li id="active1"><a href="Home.html" id="current">Home</a></li>
<li><a href="Host Services.html">Host</a></li>
<li><a href="Guest Services.html">Guest</a></li>
<li><a href="About Us.html">About Us</a></li>
<li><a href="Request Info.html">Request Info</a></li>
</ul>
</div> </div>


  <div class="content">
    <div class="content">
      <h1>Contact</h1>
     <form action="Request Info2.html" onsubmit="return validateForm()" method="post">

    <fieldset>
    <legend>Required Information</legend>
 <table cellpadding="3">

      <tr><td><label for="name"><strong>First Name:</strong></label></td><td>
      <input type="text" name="name" id="name" maxlength="30" onblur="validateName(name)" placeholder="Johnny"/>
      <span id="fnameError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>

      <tr><td><label for="lname"><strong>Last Name:</strong></label></td><td>
      <input type="text" name="lname" id="lname" maxlength="30" onblur="validateName(lname)" placeholder="Smith"/>
      <span id="lnameError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>

      <tr><td><label for="email"><strong>Email:</strong></label></td><td>
      <input type="text" name="email" id="email" maxlength="75" onblur="validateEmail(email)" placeholder="johndoe@email.com"/>
      <span id="emailError" style="display: none;">You can must enter a valid email address</span></td></tr>

      <tr><td><label for="phone"><strong>Phone:</strong></label></td><td>

      <input type="text" name="phone" id="phone"   maxlength="11" onblur="validatePhone(phone)" placeholder="303-777-7777"/>
      <span id="phoneError" style="display: none;">You can only use numbers</span></td></tr>

     <tr><td><strong><label for="comment">Comments:</strong></label>
      </td><td>
<textarea input type="text" name="comment" id="comment" textarea rows="10" cols="30"maxlength="500" >
 </textarea> 
      <span class="validateComment" id="commentError" style="display: none;">Please leave us your comments</span></td></tr>
      </table>
    </fieldset>


    <fieldset style="text-align: center" >
      <label ="terms"><strong>Terms and Conditions</strong></label><br>

       <p>Please read our <a href="Privacy.html">Privacy Policy </a>before submitting. We will always protect your privacy. You have the ability to change, update or terminate your information on the site at anytime you choose. B-n-B Concierges also reserves the right to remove any person from the site at their discretion. </p>
    <br/>
    I confirm that I agree with terms & conditions

          <input type="checkbox" name="terms" id="accept" value="accept" maxlength="10" onblur="validateCheckbox(terms)" />
<span class="validateError" id="termsError" style="display: none;">You need to accept our terms and conditions</span>
    </fieldset>   
    <fieldset>
      <input type="submit" id="submit" name="submit" value="Submit" />
    </fieldset>   
  </form>
    </div>
</div>
    <div class="footer">
    <p><div id="navcontainer">
<ul id="navlist2">
<li id="active2"><a href="Policies.html" >Conditions</a></li>
<li><a href="Privacy.html">Privacy</a></li>
<li><a href="Registration.html">Sign Up</a></li>
<li><a href="#">© 2014 Heidi Medina</a></li>
</ul>
</div>
</div>
</body>
</html>

Answer 1

I do not believe this warrants an answer, but I do not have enough reputation to comment as of yet. 我认为这没有必要给出答案，但是到目前为止，我还没有足够的声誉来发表评论。

Consider using HTML5 patterns if possible. 如果可能，请考虑使用HTML5模式。

Examples : 例子：
http://html5pattern.com/Names http://html5pattern.com/名称

Polyfill : Polyfill ：
https://github.com/ryanseddon/H5F https://github.com/ryanseddon/H5F

Most of the time simply specifying the input type is enough (phone, email) 大多数情况下，只需指定输入类型即可（电话，电子邮件）
<input type="email" name="" value="" required />

You can fine-tune the validation with the pattern attribute 您可以使用pattern属性微调验证
<input type="text" pattern="[a-zA-Z0-9]+">

Answer 2

There are few minor issues in the code. 代码中很少有小问题。 ID values are wrongly provided in your JS code 您的JS代码中错误提供了ID值

Eg: you have fnameError as ID to display error in firstname. 例如：您拥有fnameError作为ID，以在名字中显示错误。

<span id="fnameError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span>

Whereas in the Javascript, you have used just nameError 而在Javascript中，您仅使用了nameError

document.getElementById('nameError').style.display = "block";

Similar kind of spelling issue is there in lastname also.. fix if there is anymore reference issues because of spelling differences, then you are good to go. 姓氏中也存在类似的拼写问题。.如果由于拼写差异而导致参考问题再解决，那么您就很好了。

Answer 3

@user3446663: @ user3446663：

The following code works. 以下代码有效。 Note that I have left the form action property empty because you had a space in the name of the form you were referring to (Request Info2.html). 请注意，我将表单操作属性留为空白，因为您所引用的表单名称（请求Info2.html）中有一个空格。 You'll want to either put an underscore in that file name so it reads 'Request_Info2.html' or remove the space so it reads 'RequestInfo2.html' in order to have the file name be recognized properly. 您可能需要在该文件名中添加下划线，使其读为“ Request_Info2.html”，或删除空格，使其读为“ RequestInfo2.html”，以便正确识别文件名。 Here's the code: 这是代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Request Info</title>

    <link href="bnb stylesheet.css" rel="stylesheet" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Alegreya+Sans:400,700,800' rel='stylesheet' type='text/css'>

    <style type="text/css">

    .sidebar1 {
        float: right;
        width: 180px;
        background-color: #9CBEEF;
        padding-bottom: 10px;
    }
    </style>

    <script>
        //Script validation coding borrowed from Philip Brown on Culttt.com
        //culttt.com/2012/08/08/really-simple-inline-javascript-validation/

        // Validate first/last name
        function validateName(name){

            // Validation rule
            var re = /[A-Za-z -']$/;

            // Check input
            if (re.test(document.getElementById(name).value)){

                // Style green
                document.getElementById(name).style.background ='#ccffcc';

                // Hide error prompt
                document.getElementById(name + 'Error').style.display = "none";

                return true;

            } else {

                // Style red
                document.getElementById(name).style.background ='#e35152';

                // Show error prompt
                document.getElementById(name + 'Error').style.display = "block";

                return false; 
            }
        }

        // Validate email
        function validateEmail(email){ 
            var re = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            if (re.test(document.getElementById(email).value)){
                document.getElementById(email).style.background ='#ccffcc';
                document.getElementById(email + 'Error').style.display = "none";
                return true;
            } else {
                document.getElementById(email).style.background ='#e35152';
                document.getElementById(email + 'Error').style.display = "block";
                return false;
            }
        }

        //Validate Comments
        function validateComment(comment){      
            var re = /[A-Za-z -']$/;
            if (re.test(document.getElementById(comment).value)){
                document.getElementById(comment).style.background ='#ccffcc';
                document.getElementById(comment + 'Error').style.display = "none";
                return true;
            } else {
                document.getElementById(comment).style.background ='#e35152';
                document.getElementById(comment + 'Error').style.display = "block";
                return false; 
            }
        }

        //Validate phone    
        function validatePhone(phone){      
            var re = /[0-9-']$/;        
            if(re.test(document.getElementById(phone).value)){      
                document.getElementById(phone).style.background ='#ccffcc';     
                document.getElementById(phone + 'Error').style.display = "none";
                return true;
            } else {        
                document.getElementById(phone).style.background ='#e35152';     
                document.getElementById(phone + 'Error').style.display = "block";
                return false; 
            }
        }

        // Validate checkbox
        function validateCheckbox(terms){
            if(document.getElementById(terms).checked){
                document.getElementById(terms + 'Error').style.display = "none";
                return true;
            } else {                
                document.getElementById(terms + 'Error').style.display = "block";
                return false;
            }
        }

        // Validate Form
        function validateForm(){            

            // Set error catcher
            var error = 0;

            // Validate first name
            if (!validateName('fname')){
                document.getElementById('fnameError').style.display = "block";
                error++;
            }

            //Validate last name
            if (!validateName('lname')){
                document.getElementById('lnameError').style.display = "block";
                error++;
            }

            //Validate phone
            if (!validatePhone('phone')){
                document.getElementById('phoneError').style.display = "block";
                error++;
            }
            // Validate email
            if (!validateEmail('email')){
                document.getElementById('emailError').style.display = "block";
                error++;
            }

            //Validate message
            if (!validateComment('comment')){
                document.getElementById('commentError').style.display = "block";
                error++;
            } 

            //Validate checkbox
            if (!validateCheckbox('terms')){
                document.getElementById('termsError').style.display = "block";
                error++;
            }

            // Don't submit form if there are errors
            if (error > 0){
                return false;
            }

        }     
    </script>

</head>

<body>
    <div class="container">
        <div class="header">
            <a href="Request Info.html">
                <img src="images/logo 3.png" alt="Insert Logo Here" name="Insert_logo" width="980" height="200" id="Insert_logo" style="background-color: #9cbeef; display:block;" />
            </a>
        </div>

        <div id="navcontainer">
            <ul id="navlist1">
                <li id="active1"><a href="Home.html" id="current">Home</a></li>
                <li><a href="Host Services.html">Host</a></li>
                <li><a href="Guest Services.html">Guest</a></li>
                <li><a href="About Us.html">About Us</a></li>
                <li><a href="Request Info.html">Request Info</a></li>
            </ul>
        </div>
    </div>

    <div class="content">

        <h1>Contact</h1>

        <form action="" onsubmit="return validateForm()" method="post">
            <fieldset>
                <legend>Required Information</legend>
                <table cellpadding="3">
                    <tr><td><label for="name"><strong>First Name:</strong></label></td><td>
                    <input type="text" name="fname" id="fname" maxlength="30" onblur="validateName(name)" placeholder="Johnny"/>
                    <span id="fnameError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>

                    <tr><td><label for="lname"><strong>Last Name:</strong></label></td><td>
                    <input type="text" name="lname" id="lname" maxlength="30" onblur="validateName(name)" placeholder="Smith"/>
                    <span id="lnameError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>

                    <tr><td><label for="email"><strong>Email:</strong></label></td><td>
                    <input type="text" name="email" id="email" maxlength="75" onblur="validateEmail(name)" placeholder="johndoe@email.com"/>
                    <span id="emailError" style="display: none;">You can must enter a valid email address</span></td></tr>

                    <tr><td><label for="phone"><strong>Phone:</strong></label></td><td>
                    <input type="text" name="phone" id="phone"   maxlength="11" onblur="validatePhone(name)" placeholder="303-777-7777"/>
                    <span id="phoneError" style="display: none;">You can only use numbers</span></td></tr>

                    <tr><td><strong><label for="comment">Comments:</strong></label></td><td>
                    <textarea input type="text" name="comment" id="comment" textarea rows="10" cols="30"maxlength="500" onblur="validateComment(name)" ></textarea> 
                    <span class="validateComment" id="commentError" style="display: none;">Please leave us your comments</span></td></tr>
                </table>
            </fieldset>

            <fieldset style="text-align: center" >
                <label ="terms"><strong>Terms and Conditions</strong></label><br>
                <p>Please read our <a href="Privacy.html">Privacy Policy </a>before submitting. We will always protect your privacy.
                   You have the ability to change, update or terminate your information on the site at anytime you choose. B-n-B
                   Concierges also reserves the right to remove any person from the site at their discretion.</p><br/>
                   I confirm that I agree with terms & conditions

                <input type="checkbox" name="terms" id="terms" value="accept" maxlength="10" onblur="validateCheckbox(name)" />
                <span class="validateError" id="termsError" style="display: none;">You need to accept our terms and conditions</span>
            </fieldset>

            <fieldset>
                <input type="submit" id="submit" name="submit" value="Submit" />
            </fieldset>   
        </form>

    </div>

    <div class="footer">
        <div id="navcontainer">
            <ul id="navlist2">
                <li id="active2"><a href="Policies.html" >Conditions</a></li>
                <li><a href="Privacy.html">Privacy</a></li>
                <li><a href="Registration.html">Sign Up</a></li>
                <li><a href="#">© 2014 Heidi Medina</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

JavaScript内联验证不起作用

问题描述

3 个解决方案

解决方案1
0 2014-05-03 18:15:42

解决方案2
0 2014-05-03 19:48:12

解决方案3
0 已采纳 2014-05-03 20:05:08

JavaScript内联验证不起作用

问题描述

3 个解决方案

解决方案1 0 2014-05-03 18:15:42

解决方案2 0 2014-05-03 19:48:12

解决方案3 0 已采纳 2014-05-03 20:05:08

解决方案1
0 2014-05-03 18:15:42

解决方案2
0 2014-05-03 19:48:12

解决方案3
0 已采纳 2014-05-03 20:05:08