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 Validate Plugin。

您需要date('Y-m-d H:i:s')，然后加入jQuery库。

您的验证是这样的。我只验证了名称字段。你可以把它带到其他领域。

＆＃13;

jQuery Validate Plugin

＆＃13;

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
    }
  });

});

＆＃13;

.error {
  color: red;
}

＆＃13;

Answer 2

如果您只希望文本框不允许空字段，那么您可以添加＆＃34; required＆＃34;关键字。

<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进行验证。您可以使用HTML5验证。

只需使用模式例如：pattern =＆＃34; [A-Za-z]＆＃34;

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

如何在HTML中添加表单验证？

4 个答案: