Question

我有一个包含一些值的表单，如firstname，lastname等。当我没有填写所有细节时，我已经显示了文本，请填写所有细节，然后进入jquery的下一步。我不希望它进入下一步。

$("button.info").click(function(event){

         var fnamee = $('input.firstname').val();
         var lnamee = $('input.lastname').val();


         if(fnamee==''||lnamee=='')
        {

             alert("Please Fill All Fields");
             event.preventDefault();

        }
         else{


         }

  });

我的表格是：

<form>
         <input type="text" class="fname"/>
         <input type="text" class="lname"/>
         <input type="submit" class="info" name="submit"/>
</form>

我已经给出了preventDefault，但它没有用。

有人可以为此解释一下吗？

Answer 1

实施中有两个错误

选择器：使用选择器$（＆＃39; input.info＆＃39;）代替$（＆＃39; button.info＆＃39;）
在if条件表达式中，不要检查相等于＆＃39;＆＃39;因为它也可以是未定义的。因此，请使用if(!fnamee || !lnamee)

而且你也可以通过多种方式实现它。

将所需属性添加到输入字段，默认情况下，如果表单为空，则会阻止表单提交。

当提交按钮类型时，您必须return false而不是preventDefault。所以我更喜欢你不是在点击按钮上而是在表单提交事件上编写代码。给表单命名，例如“myForm＆＃39;然后

$('form[name="myForm"]').submit(function() {
     var fnamee = $('input.firstname').val();
     var lnamee = $('input.lastname').val();
         if (fnamee==''||lnamee=='') {
            alert("Please Fill All Fields");
            return false; //it can aslso be preventDefault
         }
});

希望这能帮到你！

Answer 2

在你的代码中，jquery选择器是错误的。所以preventDefault无法正常工作

$("button.info")

这应该是

$("input.info").click(function(event){
     var fnamee = $('input.fname').val();
     var lnamee = $('input.lname').val();

    if(fnamee==''||lnamee=='')
    {
         alert("Please Fill All Fields");
         event.preventDefault();
    }
    else{

    }  
});

Answer 3

请检查您的班级名称。应为.info，.fname和.lname：

$(".info").on('click',function(event){

         var fnamee = $('.fname').val();
         var lnamee = $('.lname').val();


         if(fnamee==''||lnamee=='')
        {

             alert("Please Fill All Fields");
             event.preventDefault();

        }

  });

它在这里工作：https://jsfiddle.net/Lbx8xh1a/

Answer 4

为每个必填字段添加额外的class（即required）。然后使用class jquery按.each()检查每个必填字段，并检查它是否为null。

例如： HTML

<form>
     <input type="text" class="fname required"/>
     <input type="text" class="lname required"/>
     <input type="submit" class="info" name="submit"/>
</form>

jQuery的：

$("button.info").click(function(event){
    var x= true;
    $('.required').each(function(i, obj) {
        if(obj.length == 0)
        {
            x=false;
        }
    });

    if(x){
        //code
    }
    else{
        alert("Please Fill All Fields");
    }
});

在jquery中点击按钮时如何防止执行该功能？

4 个答案: