在不使用插件的情况下在jquery中进行表单验证

Question

我想在将数据发送到保护程序之前使用jquery验证一个简单的表单.在这里,我需要在警告框中显示错误消息.我不能使用任何jquery插件来使用验证过程.

这是我的HTML表单 -

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

这是FIDDEL

任何人都可以告诉我,我怎么能搞清楚这一点？谢谢.

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

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