Question

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

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

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

请帮助我，谢谢

HTML CODE：

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

$(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]').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 2

试试这个：

$(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 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;
  });
});

希望这有帮助。

工作代码段

＆＃13;

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

＆＃13;

#all

＆＃13;

检查表单以查看是否有任何输入具有jQuery每个方法的值

3 个答案:

工作代码段