Question

您好我在一个表单中有2个提交按钮。下面的脚本通过向用户发送警报消息来帮助防止提交空字段。但是我只需要点击我的两个提交按钮之一就可以运行它。换句话说，如果单击一个按钮，它将提交带有或不带空白字段的表单，另一个按钮将运行下面的脚本，不允许使用空白字段提交表单。非常感谢任何帮助，谢谢。

   <script type="text/javascript">
     $('form').on('submit', function () {
        var thisForm = $(this);
        var thisAlert = thisForm.data('alert');
        var canSubmit = true;
        thisForm.find('[data-alert]').each(function(i) {
            var thisInput = $(this);
            if ( !$.trim(thisInput.val()) ) {
                thisAlert += '\n' + thisInput.data('alert');
                canSubmit = false;
            };
        });
        if( !canSubmit ) {
            alert( thisAlert );
            return false;
        }
    });
    </script>

Answer 1

不要连接到表单提交事件，而是连接到要验证的按钮的单击事件。从click事件返回true将允许提交发生，false将阻止它。

Answer 2

您有一个表单和两个提交按钮，默认情况下，它们都会提交表单。要阻止一个按钮提交，请添加一个单击处理程序，它既可以阻止默认的提交操作，也可以执行您希望该按钮执行的任何操作。

<强> HTML

<form id="form">
    <input type="text" value="something" />
    <input id="submit1" type="submit" value="send" />
    <input id="submit2" type="submit" value="ignore" />
</form>

<强>的JavaScript

$('#submit2').on('click', function (event) {
    event.preventDefault();
    // Form will not be submitted
    // Do whatever you need to do when this button is clicked
});


$('form').on('submit', function () {
    var thisForm = $(this);
    var thisAlert = thisForm.data('alert');
    var canSubmit = true;
    thisForm.find('[data-alert]').each(function(i) {
        var thisInput = $(this);
        if ( !$.trim(thisInput.val()) ) {
            thisAlert += '\n' + thisInput.data('alert');
            canSubmit = false;
        };
    });
    if( !canSubmit ) {
        alert( thisAlert );
        return false;
    }
});

演示 https://jsfiddle.net/BenjaminRay/dqqfLxav/

Answer 3

您可以尝试添加click事件并将类添加到提交按钮。因此，您知道哪个按钮点击会相应地提交表单。

$('form button').click(function(){
  if($(this).hasClass('.submit-without-validation')) { 
     $('form').submit();
  }

  if($(this).hasClass('.submit-with-validation')) { 
     //Do your validation and then submit
  }
});

Answer 4

有很多答案可以用来达到你想要的效果。你也可以尝试这个。这是一些解释。基本上，您需要可以使用html5数据属性来设置值以区分两个按钮。单击该按钮后，您可以使用条件检查值，如下代码所示：

<强> HTML

<form>
  <input type="text" value="" id="name"/>
  <input type="submit" class="btn_submit" value="Submit validate" data-valid="yes"/>
  <input type="submit" class="btn_submit" value="Submit without validate" data-valid="no"/>
</form>

<强> JS

$(document).on('click', '.btn_submit', function(e){
    e.preventDefault();
    var data_valid = $(this).data('valid');    
    if(data_valid == "yes")
    { 
         // doing your stuff here for validation like example below
         var input = $('#name').val();
         if(input=="")
         {
             alert('required');
             return;
         }        
         // After the validation process finish, submit the form 
         $('form').submit();  
    }
    else
    {
        // submit without validation
        $('form').submit();            
    }    
});

如果单击1个表单中的2个提交按钮中的1个，我该如何运行脚本？

4 个答案: