防止两个默认功能发生，并同时触发第三个事件

Prevent 2 default functions from happening and trigger a third event at same time

本文关键字：事件 三个 两个 默认 功能      更新时间：2024-04-27

问题听起来可能很简单。。。。。我试图实现的是，当表单验证失败时，我想要show a custom alert box和prevent form from submitting

我被卡住的地方

我正在将Zebra_Dialog用于自定义警报框。。。现在，我知道e.preventDefault()停止了默认功能的触发。。。。。但这只会停止一个事件

我该如何同时进行以下操作：

  • 阻止出现默认警报框
  • 阻止表单提交
  • 显示自定义警报框


插件教程还提到了只防止默认警报框发生

HTML

 <form id="searchform" class="input-append" method="post" action="search.php">
      <select class="city shadow" name="city" id="city">
         <option selected>Select your city</option>
         <option value="AAAAA">AAAAA</option>
      </select>
      <select class="location shadow" name="location">
         <option selected>Select your Location</option>
         <option value="Loc">Loc</option>
         <option value="Loc2">Loc2</option>
         <option value="Loc3">Loc3</option>
      </select>
      <select class="gender shadow" name="gender">
         <option selected>Select your gender</option>
         <option value="Male">Male</option>
         <option value="Female">Female</option>
      </select>
      <button type="submit" class="btn" name="search_room_for_me" id="search_room_for_me"> Search </button>
   </form>

Jquery

<script>
 $("#searchform").submit(function(e){
        var city = $(".city").val();
        var location = $(".location").val();
        var gender = $(".gender").val();
        if( city != "Select your city" )
        {
            if( location != "Select your Location")
            {
                if( gender != "Select your gender")
                {
                    //submit form
                }
                else
                {
                   e.preventDefault(); // here, default alert should stop
                   $.Zebra_Dialog('The link was clicked!');
                   alert("Invalid Gender Selected");
                   e.preventDefault(e); // prevent form submit
                }
            }
            else
            {
                alert("Invalid Location Selected");
                e.preventDefault(e);
            }
        }
        else
        {
            alert("Invalid City Selected");
            e.preventDefault(e);
        }
     });        


 </script>

有没有人尝试过类似的方法，或者有没有其他方法可以实现这一点！！？？

对于任何未来的访问者：

我的订单错误

e.preventDefault(); // here, default alert should stop
$.Zebra_Dialog('The link was clicked!');
alert("Invalid Gender Selected");
e.preventDefault(e); // prevent form submit

相反，这起到了的作用

e.preventDefault(e);
$.Zebra_Dialog('<strong>Gender :</strong>,Select your gender ,
Please select a proper gender to proceed ',
{'type':'error','title':'Select Gender'});


原因：e.preventDefault(e);中存在冲突，只有一个preventDefault(e)就足以停止所有默认功能（力之前就知道！！）

相关文章：