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

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

这是我的HTML表单 –

 Name :  
 Address :  
 Email:  
   

如果用户提交此表单而不填写任何表单元素，那么我需要在单个警报框中显示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/

Answer 2

如果您只想一次显示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; }); 

更新小提琴

Answer 3

尝试以下：

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

我希望它有所帮助。

Answer 4

表格validation：

此代码用于使用jquery进行简单表单validation。您可以在表单中使用此代码进行validation。

谢谢

Answer 5