7

我想使用 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;
    }    
});

这是一个小提琴。

谁能告诉我我该如何解决这个问题？谢谢你。

4

4 回答 4

9

循环遍历表单中的每个输入元素，并检查它是否有值。如果不将错误消息附加到一个字符串，您稍后会在 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);
    }
});

小提琴：http: //jsfiddle.net/WF2J9/17/

于 2013-08-13T14:05:07.050 回答
4

尝试以下：

  $('#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/

我希望它有帮助。

于 2013-08-13T14:07:28.573 回答
3

如果您只希望一次出现 1 个警报，则需要检查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;
});

更新的小提琴

于 2013-08-13T14:00:26.010 回答
1

表单验证：

此代码用于使用 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>
于 2016-12-26T10:09:53.090 回答