在不使用插件的情况下在jquery中进行验证 [英] form validation in jquery without using plugin

问题描述

我想在将数据发送给保存程序之前使用jquery验证一个简单的表单。在这里，我需要在警告框中显示错误消息。我无法使用任何jquery插件来使用验证过程。

这是我的HTML表单 -

 < form action = method =postclass =a> 
名称：< input type =textclass =textname =nameid =name/> <峰; br /> 
地址：< input type =textclass =textname =addressid =address/> <峰; br /> 
电子邮件地址：< input type =textclass =textname =emailid =email/> <峰; br /> 
 
< input type =buttonid =submitvalue =Submitname =submit/> 
< / form> 
  

如果用户提交此表单而未填写任何表单元素，则需要在单个表单中显示3条错误消息警报框。像这样

 名称不能为空。 
地址不能为空。 
电子邮件不能为空。 
  

如果只有一个或两个字段为空，则需要根据情况控制错误消息。

在这里，我尝试了使用jquery。但警告框逐个显示。

我的jQuery -

  $（'＃submit'）。 on（'click'，function（）{
 valid = true; 
 if（$（'＃name'）。val（）==''）{
 alert（请输入你的名字）; 
 valid = false; 
} 
 
 if（$（'＃address'）。val（）==''）{
 alert （请输入您的地址）; 
 valid = false; 
} 
}）; 
  

这是 FIDDEL

任何机构可以告诉我如何解决这个问题？
谢谢。

解决方案

遍历表单中的每个输入元素，并检查它是否有值。如果没有将错误消息追加到一个字符串中，那么如果有效值为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 + ='请输入您的'+ inputName +'\\\
'; 
} 
}）; 
 
 if （！valid）{
 alert（message）; 
} 
}）; 
  

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

I want to validate a simple form using jquery before sending data to the saver. Here I need to display error messages in a alert box. I can't use any jquery plugin to use validation process.

This is my HTML form -

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

If a user submit this form without filling any form element then I need to display 3 error messages in single alert box. Like this

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

If only one or two field remain empty, then I need to control error message according the situation.

Here I tried it using jquery. But alert box display one by one.

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

This is FIDDEL

Can any body tell me how can I figure this out? Thank you.

解决方案

Loop through each input element in the form, and check if it has a value. If not append the error message to a string which you later alert out if valid is 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/

这篇关于在不使用插件的情况下在jquery中进行验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！