检查表单以查看是否有任何输入对 jQuery 每种方法都有价值

Question

我想返回 false 表单并在选择器上运行 css/focus 事件。

使用jQuery.each函数时如何避免表单提交？

此代码现在不起作用，但如果您替换 'return true;' '返回假;'工作正常，但不提交表单！

请帮帮我，谢谢

HTML 代码：

<form id="formdata" method="post" action="">
    <div class="title">Ajax To Send Data And Save In PHP</div>

    <span>Fullname:</span>
    <input type="text" id="fullname" name="fullname" >

    <span>Email:</span>
    <input type="text" id="email" name="email" >

    <span>Comment:</span>
    <textarea name="comment" id="comment" cols="30" rows="5" ></textarea>

    <button type="submit">Create Data</button>
    <br>
    <div id="result"></div>
</form>

JS 代码：

$(document).ready(function () {

    var all_elements = '#formdata input[type=text]';

    $(all_elements).blur(function(){
        $(this).each(function(n, element){
           $("#" + element.id).prev().css("color", "#555");
           $("#" + element.id).css("border", "1px solid #CCC");
        });
    });

    $("#formdata").on('submit',(function() {

        $(all_elements).each(function(n, element){
            if ($(element).val()=='') {
                alert('Field '+element.id+' must have a value');
                $("#" + element.id).prev().css("color", "#F00");
                $("#" + element.id).css("border", "1px solid #F00");
                $("#" + element.id).focus();

                return false;
            }
        });
        return true;

        alert('Form submited, done!');

        }
    ));
});

Answer 1

试试这个：

$(document).ready(function () {

    var all_elements = '#formdata input[type=text]';

    $(all_elements).blur(function(){
      $(this).each(function(n, element){
        $("#" + element.id).prev().css("color", "#555");
        $("#" + element.id).css("border", "1px solid #CCC");
      });
    });

    $("#formdata").on('submit',function(e) {

        var validationFailed = false;
        $(all_elements).each(function(n, element){
            if ($(this).val() === '') {
              alert('Field '+element.id+' must have a value');
              $("#" + element.id).prev().css("color", "#F00");
              $("#" + element.id).css("border", "1px solid #F00");
              $("#" + element.id).focus(); 
              validationFailed = true;
            }
        });

         if(validationFailed)
          e.preventDefault();
        else
          alert('Form submited, done!');

        });

    });

例如：https://jsfiddle.net/DinoMyte/43xk9ta2/

Answer 2

你会这样做

$(document).ready(function () {
    var all_elements = $('#formdata input[type=text]').on('blur', function(){
        $(this).prev().css({
            color  : "#555",
            border : "1px solid #CCC"
        });
    });

    $("#formdata").on('submit', function() {
        var valid = all_elements.filter(function() {
            var ret = this.value.trim() === "";
            if (ret) {
                alert('Field ' + this.id + ' must have a value');
                $(this).prev().css({
                    color  : "#F00",
                    border : "1px solid #F00"
                }).focus();
            }
            return ret;
        }).length === 0;

        if ( valid ) alert('Form submited, done!');
        return valid;
    });
});

Answer 3

Working fiddle

问题是您现在拥有的return false; 只会阻止foreach 语句继续（而不是表单），因此您可以添加一个名为submit 的额外变量，例如默认为true作为值，如果$(element).val()=='' 实现将其更改为false，则在each 语句之后创建一个条件，将基于此变量提交或阻止提交：

var submit = true;

$(all_elements).each(function(n, element){
  if ($(element).val()=='') {
      alert('Field '+element.id+' must have a value');
      $("#" + element.id).prev().css("color", "#F00");
      $("#" + element.id).css("border", "1px solid #F00");
      $("#" + element.id).focus();

      submit=false;

      return false;
  }
});

if(submit){
  alert('Form submited, done!');

  return true;
}
else
  return false;

希望这会有所帮助。

---

工作片段

$(document).ready(function () {

  var all_elements = '#formdata input[type=text]';

  $(all_elements).blur(function(){
    $(this).each(function(n, element){
      $("#" + element.id).prev().css("color", "#555");
      $("#" + element.id).css("border", "1px solid #CCC");
    });
  });

  $("#formdata").on('submit',function() {
    var submit = true;

    $(all_elements).each(function(n, element){
      if ($(element).val()=='') {
        alert('Field '+element.id+' must have a value');
        $("#" + element.id).prev().css("color", "#F00");
        $("#" + element.id).css("border", "1px solid #F00");
        $("#" + element.id).focus();

        submit=false;

        return false;
      }
    });

    if(submit){
        alert('Form submited, done!');

        return true;
    }else
      return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formdata" method="post" action="">
  <div class="title">Ajax To Send Data And Save In PHP</div>

  <span>Fullname:</span>
  <input type="text" id="fullname" name="fullname" >

  <span>Email:</span>
  <input type="text" id="email" name="email" >

  <span>Comment:</span>
  <textarea name="comment" id="comment" cols="30" rows="5" ></textarea>

  <button type="submit">Create Data</button>
  <br>
  <div id="result"></div>
</form>