使用jQuery进行表单验证而不使用插件

Question

我希望使用jQuery执行简单表单的客户端验证，但不能使用任何验证插件。我想在一个单独的警告框中显示任何错误信息。

这是我的表单：

<form action="" method="post" class="a">
    Name : <input type="text" class="text" name="name" id="name" /> <br/>
    Address : <input type="text" class="text" name="address" id="address" /> <br/>
    Email: <input type="text" class="text" name="email" id="email" /> <br/>

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

如果用户在提交表单时没有填写任何输入，则我需要在一个警告框中显示3个错误消息。就像这样：

Name can not be empty.
Address can not be empty.
email can not be empty.  

如果只有一个或两个字段为空，我需要根据情况控制错误消息。在这里，我尝试使用jQuery实现。但是警报显示在不同的框中：

我的jQuery代码：

$('#submit').on('click', function() {
    valid = true;   
    if ($('#name').val() == '') {
        alert ("please enter your name");
        valid = false;
    }

    if ($('#address').val() == '') {
        alert ("please enter your address");
         valid = false;
    }    
});

这里有一个代码片段。

有人能告诉我如何解决这个问题吗？谢谢。

- TNK

Answer 1

循环遍历表单中的每个输入元素，并检查其是否具有值。如果没有，将错误消息附加到一个字符串中，如果valid为false，则稍后通过弹出窗口提示。

$('#submit').on('click', function() {
    var valid = true,
        message = '';

    $('form input').each(function() {
        var $this = $(this);

        if(!$this.val()) {
            var inputName = $this.attr('name');
            valid = false;
            message += 'Please enter your ' + inputName + '\n';
        }
    });

    if(!valid) {
        alert(message);
    }
});

Fiddle: http://jsfiddle.net/WF2J9/17/

- ninja

---

太好了。非常感谢。有一个问题，如果电子邮件无效，我可以显示错误吗？ - TNK

我复制了忍者的代码，并在此基础上更新了电子邮件模式检查：http://jsfiddle.net/WF2J9/22/ 感谢@ninja :) - maverickosama92

Answer 2

请尝试以下操作：

  $('#submit').on('click', function() {
    var valid = true,
    errorMessage = "";

    if ($('#name').val() == '') {
       errorMessage  = "please enter your name \n";
       valid = false;
    }

    if ($('#address').val() == '') {
       errorMessage += "please enter your address\n";
       valid = false;
    }    

    if ($('#email').val() == '') {
       errorMessage += "please enter your email\n";
       valid = false;
    } 

    if( !valid && errorMessage.length > 0){
       alert(errorMessage);
    }   
  });

这里有一个可用的示例：http://jsfiddle.net/WF2J9/24/

希望它能对您有所帮助。

- maverickosama92

Answer 3

如果您只想同时出现一个警报，请针对每个条件检查valid的状态：

$('#submit').on('click', function() {
    valid = true;   

    if (valid && $('#name').val() == '') {
        alert ("please enter your name");
        valid = false;
    }

    if (valid && $('#address').val() == '') {
        alert ("please enter your address");
         valid = false;
    }    

    return valid;
});

更新的代码示例

- Rory McCrossan

---

感谢您的快速回复。使用这段代码，我只能得到一个错误信息。 - TNK

Answer 4

表单验证：

这段代码提供了使用jQuery进行简单表单验证的方法，您可以在您的表单中使用它进行验证。

谢谢

        <form action="" method="post" name="ContactForm" id="ContactForm1">
        <div id='message_post'></div>
        <div class="input-group"> <span class="input-group-addon"></span>
         <input type="text" name="fname" class="form-control" placeholder="First Name *">
         </div>
         <div class="input-group"> <span class="input-group-addon"></span>
         <input type="text"  name="lname" required="required" class="form-control" placeholder="Last Name *">
        </div>
         <div class="input-group"> <span class="input-group-addon"></span>
         <input type="text"  name="phone" required="required" class="form-control" placeholder="Phone (bh) *">
        </div>
        <div class="input-group"> <span class="input-group-addon"></span>
         <input type="text"  name="email" required="required" class="form-control" placeholder="Email *">
         </div>
         <div class="input-group"> <span class="input-group-addon"></span>
         <textarea rows="5"  name="message" required="required" class="form-control" placeholder="Message *"></textarea>
         </div>
         <div class="input-group form-buttons">
                    <span class="input-group-btn">
        <input type="submit" id="btn" name="buttn" value="Send Message"  class="btn btn-default"/><i class="fa fa-envelope"></i> 
        </span>
        </div>
        </form>

        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
<script>

// just for the demos, avoids form submit

jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#ContactForm1" ).validate({
  rules: {
            fname: "required",
            lname: "required",
            phone: "required",
            email: {
                required: true,
                email: true
            },

            message: "required",

  }
});
</script>

- Prince Bhatt

---

你的代码可能适用于 OP 想要使用插件的情况，但是 OP 并不想使用插件！ - salvu