Question

我试图验证在尝试插入MySQL数据库

之前，使用jQuery不会将文本字段留空

所以在我添加if条件以检查字段是否为空之前，插入工作正常并且如果两个都留空而不是一个则会失败。我添加了IF条件，它总是清除字段并且即使填写了两个文本字段也无法保存。

我尝试了几种不同的方法，包括.val()==""和.length==0。不确定为什么它会一直清除所有字段。任何帮助将不胜感激。

JavaScript文件：

$("#sub").click( function() {
  //Check to see that no fields are left blank if one is all fields are cleared and save is failed from insert.php
  if ($("#name").val()==""){
    clearInputs();
    return false;
  }
  else if($("#comment").val()==""){
      clearInputs();
      return false;
  }
  else{
  //save the fields into an array and post to the result span then clear inputs 
  $.post( $("#myForm").attr("action"), 
     $("#myForm :input").serializeArray(), 
     function(info){ $("#result").html(info); 
  });
  clearInput();
  }
});

$("#myForm").submit( function() {
  return false; 
});

function clearInput() {
  $("#name").val('');
  $("#comment").val('');
}

Answer 1

不确定为什么你会清除两个输入，如果一个是空白的，而不是只是弹出一条消息，但这是你如何做的：

var inputs = $('#name, #comment'),
    form   = $("#myForm");

form.on('submit', function(e) {
    e.preventDefault();
    var valid = inputs.filter(function() {
        return $.trim(this.value).length;
    }).length === inputs.length; // all inputs have a value

    if (valid) {
        $.post( form.attr("action"), form.serialize(), function(info){ 
            $("#result").html(info); 
        });
    }else{
        inputs.val('');
    }
});

Answer 2

我从菜鸟（我）的角度提出这个“答案”。我在我的一些东西中使用过这种风格。它显然不如adeneo那么优雅。

HERE是一个小提琴。

HTML

<button id='clickme'>CLICK</button>
<div>Name:<input id='name' type='text'></div>
<div>Comment:<input id='comment' type='text'></div>

CSS

button {
    margin: 10px auto;
}
div {
    margin: 10px auto;
}

JS

   $('#clickme').click(function(){
     var nametext = $('#name').val();
     var commenttext = $('#comment').val();
     if (nametext.length < 1 || commenttext.length < 1)
        {
         alert('Both fields need text');
         $(':input').val('');      
         }
        else
        {
         alert('Query sent');//ajax/post function here
         $(':input').val('');
         }
                                   });

表单验证保持清除字段

2 个答案: