堆棧內存溢出
  簡體   English   中英

JavaScript內聯驗證不起作用

[英]JavaScript Inline Validation not Working

 原文  2014-05-03 18:02:12  6   3    javascript/ forms/ validation

問題描述

我第一次嘗試使用Javascript內聯表單驗證。 我從另一個網站借來了代碼，並做了建議的所有操作以使其正確，但是仍然無法正常工作。 如果信息有誤，應該將表單框變成紅色，並在不正確的框下打印一條消息，如果輸入的信息正確，則將其變成綠色。 請幫忙。 

<!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>

3 個解決方案

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

我認為這沒有必要給出答案，但是到目前為止，我還沒有足夠的聲譽來發表評論。

如果可能，請考慮使用HTML5模式。

例子 ：
http://html5pattern.com/名稱

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

大多數情況下，只需指定輸入類型即可（電話，電子郵件）
<input type="email" name="" value="" required />

您可以使用pattern屬性微調驗證
<input type="text" pattern="[a-zA-Z0-9]+">

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

代碼中很少有小問題。 您的JS代碼中錯誤提供了ID值

例如：您擁有fnameError作為ID，以在名字中顯示錯誤。 

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

而在Javascript中，您僅使用了nameError 

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

姓氏中也存在類似的拼寫問題。.如果由於拼寫差異而導致參考問題再解決，那么您就很好了。

解決方案3
 0 已采納  2014-05-03 20:05:08

@ user3446663：

以下代碼有效。 請注意，我將表單操作屬性留為空白，因為您所引用的表單名稱（請求Info2.html）中有一個空格。 您可能需要在該文件名中添加下划線，使其讀為“ Request_Info2.html”，或刪除空格，使其讀為“ RequestInfo2.html”，以便正確識別文件名。 這是代碼： 

<!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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 頁面驗證：內聯Javascript 內聯JavaScript表單驗證 內聯驗證不起作用 PHP代碼中的JavaScript內聯驗證 內聯活動JavaScript表單驗證 Javascript僅內聯工作 內聯JavaScript代碼不起作用 內聯javascript代碼不起作用 Javascript中的內聯`++`無法正常工作 內聯 javascript 工作但不作為參考
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM