如何在HTML中添加表單驗證？

Question

我有一個表格：

<form method="post">      
    <input type="text" name="name" placeholder="Name :" data-required="true" data-type="Name"> 
    <input type="text" name="email" placeholder="Email:" data-required="true" data-type="Email"> 
    <input type="text" name="phone" placeholder="Phone Number:" data-required="true" data-type="Phone"> 
    <select> 
      <option value="" disabled selected>College Name:</option> 
      <option>College 1</option> 
      <option>College 2</option> 
      <option>College 3</option> 
      <option>College 4</option> 
      <option>College 5</option> 
      <option>College 6</option> 
    </select> 
    <select> 
      <option value="" disabled selected>Enquiry Type:</option> 
      <option>MD/MS Coaching</option> 
      <option>MDS Coaching</option> 
      <option>DNB Coaching</option> 
    </select> 
    <textarea>Message</textarea>      
    <button class="btn btn-info" type="submit">Submit</button> 
</form> 

現在，我需要驗證信息添加到每個場像顯示爲紅色的字段下面的文本。

我不太瞭解Javascript或JQuery。

請幫我添加驗證字段。

Answer 1

雖然可以使用HTML5本身做驗證，我通常使用jQuery驗證插件。

您需要jQuery，然後包含jQuery Validate Plugin庫。

您的驗證碼是這樣的。我只驗證名稱字段。您可以將其轉發給其他領域。

var self = this; 
 
$(document).ready(function() { 
 
    
 
    
 
    // Right way, as suggested by @Sparky in the comments below, is to have attache validation code to the form only once. 
 
    $("#myForm").validate({ 
 
    rules: { 
 

 
     'name': { // this is value of the name attribute of your field 
 
     required: true, 
 
     }, 
 

 
     'email': { 
 
     required: true, 
 
     // regex: 'regex for email field goes here' 
 
     } 
 
    }, 
 
    messages: { 
 
     'name': { 
 
     required: "Name is required" 
 
     }, 
 

 
     'email': { 
 
     required: "Email is required", 
 
     //regex: 'Error response for regex fail goes here' 
 
     } 
 
    } 
 

 
    }); 
 
    $(".submit").click(function() { 
 

 
    
 
    // Do a check each time before submit 
 
    if (!$("#myForm").valid()) 
 
     alert("Form has validation errors. Cannot submit!!"); 
 
    else { 
 
     alert("Form can be submitted!!"); 
 
     // do jQuery form submit here 
 
    } 
 
    }); 
 

 
});

.error { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script> 
 

 
<form method="post" id="myForm"> 
 
    <input type="text" name="name" placeholder="Name :" data-required="true" data-type="Name"> 
 
    <input type="text" name="email" placeholder="Email:" data-required="true" data-type="Email"> 
 
    <input type="text" name="phone" placeholder="Phone Number:" data-required="true" data-type="Phone"> 
 
    <select> 
 
    <option value="" disabled selected>College Name:</option> 
 
    <option>College 1</option> 
 
    <option>College 2</option> 
 
    <option>College 3</option> 
 
    <option>College 4</option> 
 
    <option>College 5</option> 
 
    <option>College 6</option> 
 
    </select> 
 
    <select> 
 
    <option value="" disabled selected>Enquiry Type:</option> 
 
    <option>MD/MS Coaching</option> 
 
    <option>MDS Coaching</option> 
 
    <option>DNB Coaching</option> 
 
    </select> 
 
    <textarea>Message</textarea> 
 
    <button class="btn btn-info submit">Submit</button> 
 
</form>

Answer 2

如果您只希望文本框不允許空字段，那麼您可以添加「required」關鍵字。

<form action="demo_form.asp" method="post"> 
    <input type="text" name="fname" required> 
    <input type="submit" value="Submit"> 
</form> 

更多HTML5表單驗證的例子，我建議：

http://www.w3schools.com/js/js_validation.asp

和

http://www.the-art-of-web.com/html/html5-form-validation/

/ChrisRun

Answer 3

你不一定需要Javascript或jQuery的爲v alidation。您可以使用HTML5驗證。

只要使用例如圖案 ：圖案= 「[A-ZA-Z]」

<input type="text" name="name" placeholder="Name :" data-required="true" data-type="Name" pattern="[A-Za-z]"> 

我用將檢查僅字母被輸入上述模式。無論是小寫還是大寫。

檢查這些資源來了解更多 http://www.w3schools.com/tags/att_input_pattern.asp

http://html5pattern.com

Answer 4

您可以使用HTML5驗證表單字段。請看下面的例子來驗證形式 -

<form method="post">      
       <input type="text" name="name" placeholder="Name :" data-required="true" required> 
       <input type="email" name="email" placeholder="Email:" data-required="true" required> 
       <input type="tel" pattern="[0-9]{10,10}" name="phone" placeholder="Phone Number:" data-required="true" required> 
       <select required> 
        <option value="" disabled selected>College Name:</option> 
        <option>College 1</option> 
        <option>College 2</option> 
        <option>College 3</option> 
        <option>College 4</option> 
        <option>College 5</option> 
        <option>College 6</option> 
       </select> 
       <select required> 
        <option value="" disabled selected>Enquiry Type:</option> 
        <option>MD/MS Coaching</option> 
        <option>MDS Coaching</option> 
        <option>DNB Coaching</option> 
       </select> 
       <textarea required>Message</textarea> 
      <input type="submit" value="Submit"> 
      </form>