javascript - jQuery空字段验证

Question

当我提交带有空字段的表单时，我会在对话框中收到成功消息。相反，我想在对话框中显示错误消息。请帮助我找到解决方案。

我的html代码：

<form id="booking" action="" method="post">
  First Name:<input type="text" id="firstName" name="firstName" maxlength="30" /><br/>
  Last Name:<input type="text" id="lastName" name="lastName" maxlength="30"/><br/>
  Contact:<input type="text" id="contact" name="contact" maxlength="15"/><br/>
  Email: <input type="text" id="email" name="email" maxlength="30"/><br/>
  <input id="save" type="button" value="Save" />
  </form>
  <div id="dialog"></div>

jQuery代码：

 $('#save').click(function(){
    if(('#firstName').length==0 && ('#lastName').length==0 && ('#contact').length==0 &&   ('#email').length==0){
     $('#dialog').attr('title','Error').text('All fields are required').dialog();
     }else{
     $('#dialog').attr('title','Success').text('Success').dialog();
     }
    });

Answer 1

('#firstName')-> 如果你使用 jQuery，这应该是$('#firstName')

此条件将始终返回 false ： ('#firstName').length==0 && ('#lastName').length==0 && ('#contact').length==0 && ('#email').length==0

获取输入类型文本的值长度：

$('#firstName).val().length

更新：

试试这个：

$('#save').click(function(){
    if($('#firstName').val().length==0 && $('#lastName').val().length==0 && $('#contact').val().length==0 &&   $('#email').val().length==0){
     $('#dialog').text('All fields are required').dialog({title:'Error'});
    } else{
     $('#dialog').text('Success').dialog({title:'Success'});
    }
 });

Answer 2

试试这个，

$('#save').click(function(){
    if($('#firstName').val()=="" || $('#lastName').val()=="" || $('#contact').val()=="" ||   $('#email').val()==""){
     $('#dialog').attr('title','Error').text('All fields are required').dialog();
     }else{
     $('#dialog').attr('title','Success').text('Success').dialog();
     }
    });

Answer 3

它应该在您的 if 条件中为 OR，||您可以使用它[val()][1]来获取所选元素的值并检查它是否为空。

你错过$了你的jQuery选择器

if(('#firstName').val()==""
---^--- //here missing $

试试这个

$('#save').click(function(){
  if($('#firstName').val()=='' || $('#lastName').val()=='' || $('#contact').val()=='' ||  $('#email').val==''){
     $('#dialog').attr('title','Error').text('All fields are required').dialog();
  }else{
    $('#dialog').attr('title','Success').text('Success').dialog();
  }
});