Question

我正在尝试使用$.get请求验证字段。我可以看到错误消息（“计划已存在”），但表单已提交。我想阻止表单提交。这是我的代码：

$("#add_plan_subscriptions").submit(function(event) {
    var flag = true;
    var subdomain_val = $('[name="plan[subdomain_type_id]"]').val();
    var plan_val = $('[name="plan[plan_type_id]"]').val();
    var plan_name = $('[name="plan[plan_name]"]').val();
    var subdomain_type_id = subdomain_val;
    var plan_name = $('[name="plan[plan_name]"]').val();
    $.get("/plans/check_duplicate_plan",{subdomain_type_id: subdomain_type_id, plan_name: plan_name}, function (response) {
      if (response){
        event.preventDefault() ;
        var element = $('[name="plan[plan_name]"]');
        var message = "Plan already present";
        addError(element,message)
        return false;
      }
      else{
        var element = $('[name="plan[plan_name]"]');
        removeError(element)
      }
    })
    if(subdomain_val == ""){
      var element = $('[name="plan[subdomain_type_id]"]')
      var message = "Please select user type"
      addError(element,message)
      flag = false;
    } 
    if(subdomain_val != ""){
      var element = $('[name="plan[subdomain_type_id]"]')
      removeError(element)
    }
    if(plan_val == ""){
      var element = $('[name="plan[plan_type_id]"]')
      var message = "Please select plan type"
      addError(element,message)
      flag = false;
    } 
    if(plan_val != ""){
      var element = $('[name="plan[plan_type_id]"]')
      removeError(element)
    }
    if (!flag){
      event.preventDefault();
      return false;
    }
    return true;
});

Answer 1

现在$.get在async表单提交函数的响应响应之前调用GET模式。因此，请使用ajax模式中的sync代替$.get

            $.ajax({
                url: '/plans/check_duplicate_plan',
                data: { subdomain_type_id: subdomain_type_id, plan_name: plan_name},
                dataType: 'json',
                async:false,
                type: 'GET',
                success: function (response) {
                    if (response){
                       event.preventDefault() ;
                       var element = $('[name="plan[plan_name]"]');
                       var message = "Plan already present";
                       addError(element,message)
                       return false;
                    }
                    else{
                        var element = $('[name="plan[plan_name]"]');
                        removeError(element)
                    }
                }
            })

Answer 2

步骤： 1.更改输入类型提交到按钮类型 2.添加此行而不是在javascript中返回true

 document.forms["signup"].submit();

我遇到了类似的问题。考虑像这样的HTML ..

<form name="login" action="ValidateLogin">
 <button id="SignIn">Login</button>
    </form>

然后在javascript中提交表单，您希望表单返回true

$.ajax({
>             type: "GET",
>             url: "ManageForm",
>             data: dataString,
>             beforeSend: function()
>             {
> 
> 
>             },
>             success: function(data)
>             {
>                 if (data == 1)
>                 {   alert("data :"+data);
>                     document.getElementById("errorName").innerHTML = "Sorry! UserName Already Taken";
>                     flag = 0;
>                     return false;
>                     
>                 }
>                 else if (data == 2)
>                 {   alert("data :"+data);
>                     document.getElementById("erroremail").innerHTML = "Email id Already Registered!";
>                     flag = 0;
>                     return false;
>                 }
>                 else if (data == 3)
>                 {   alert("data :"+data);
>                     document.getElementById("errorphone").innerHTML = "Phone No  Already Registered!";
>                     flag = 0;
>                     return false;
>                 }
>                 else
>                     document.forms["signup"].submit();
>              }
>             
>         });

Answer 3

删除$ .get功能中的event.preventDefault() ;，如果您只想阻止表单提交，请在提交功能中添加event.preventDefault() ;或return false;

基于jquery文档http://api.jquery.com/event.preventdefault/ event.preventDefautl（）;如果被调用，则不会触发事件的默认操作。

因此我们调用此方法您的提交函数将停止触发默认操作

希望能帮助您理解它：）

Answer 4

您只是在存在响应或子域时阻止表单提交。您需要在事件回调的顶部添加event.preventDefault()。

$("#add_plan_subscriptions").submit(function(event) {
    event.preventDefault();
    var flag = true;

Answer 5

提交表单的原因是因为在您发布的代码的最后两行中，您返回true ;

让它返回false;

您发布的代码的最后两行是这样的

return true;
});

改为像这样

 return false;
});

并尝试删除您的返回true;在该确切的行中，并将其替换为event.preventDefault（）;

返回false而不是阻止表单提交

5 个答案: