jQuery验证和表单提交

时间:2017-04-26 16:08:01

标签: jquery ajax jquery-validate

好的伙计们。我在这里很难受。这是一个发布到Salesforce的自定义表单。问题是不允许First Name字段包含数字。这是没有验证的jQuery:

jQuery(document).ready(function(){
function a(a){
    var b=a||"",c={};
    if(0===b.indexOf("?")&&(b=a.substr(1)),
    !b)return c;for(var e,d=b.split("&"),
    f=0,g=d.length;f<g;f+=1)e=d[f].split("="),
    2===e.length&&e[0]&&e[1]&&(c[decodeURIComponent(e[0]).toLowerCase()]=decodeURIComponent(e[1]));return c}

jQuery(".get-in-touch__form__content > form").validate({
rules: {
    first_name: "required",
    last_name:"required",
    checkbox:"required",
    phone:{required:!0,number:!0},
    email:{required:!0,email:!0}},
    errorPlacement:function(error, element){
        if(element.attr("type") == "checkbox")
            {error.appendTo(('.checkError'));
        }
        else{error.insertAfter(element);}
    }
});

jQuery(".get-in-touch__form__content > form").submit(function(b){
b.preventDefault();
var c=jQuery("#first_name").val(),
d=jQuery("#last_name").val(),
f=(
    jQuery("#company").val(), jQuery("#phone").val()
  ),
g=jQuery("#email").val(),
h=/[0-9 -()+]+$/,
i=new RegExp(/^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$/i);if(c&&d&&f&&g)
{
    var j=a(window.location.search);
    return  
 j.utm_campaign&&jQuery("input[name=00N500000093d5K]").val(decodeURICompone
    nt(j.utm_campaign)),
        j.utm_content&&jQuery("input[name=00N500000093d5t]").val(decodeURIComponent(j.utm_content)),
        j.utm_source?jQuery("input[name=00N500000093d4l]").val(decodeURIComponent(j.utm_source)):jQuery("input[name=00N500000093d4l]").val("Organic Web"),
        j.utm_term&&jQuery("input[name=00N500000093d5U]").val(decodeURIComponent(j.utm_term)),
        h.test(f)&&10===f.length?i.test(g)?(
            jQuery.ajax({
                type:"POST",
                url:"https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8",
                data:jQuery(this).serialize(),success:function(a){}}),
                void jQuery("#contactDraftModal").modal("show")):void
                alert("Please enter a valid email address."):void alert("Only enter numbers and do not use spaces eg. 1234567890")
    }
    }),

    jQuery(".purchase-now").click(function(){
    jQuery("html, body").animate({scrollTop:jQuery("#pkg").offset().top-130},500)
})
jQuery(".purchase-now").click(function(){
    jQuery("html, body").animate({scrollTop:jQuery("#pbgit").offset().top-130},500)
    })
});

这就是名字验证:

    jQuery(document).ready(function(){
    function a(a){
        var b=a||"",
        c={};
        if(0===b.indexOf("?")&&(b=a.substr(1)),
        !b)return c;for(var e,d=b.split("&"),
        f=0,
        g=d.length;
        f<g;
        f+=1)e=d[f].split("="),
        2===e.length&&e[0]&&e[1]&&(c[decodeURIComponent(e[0]).toLowerCase()]=decodeURIComponent(e[1]));return c}

jQuery(".get-in-touch__form__content > form").validate({
    rules: {
        first_name: {
            required: true,
            pattern: "^[a-zA-Z_]*$"
        },
        last_name:"required",
        checkbox:"required",
        phone:{required:!0,number:!0},
        email:{required:!0,email:!0}},
        errorPlacement:function(error, element){
            if(element.attr("type") == "checkbox")
                {error.appendTo(('.checkError'));
            }
            else{error.insertAfter(element);}
        }
});

jQuery(".get-in-touch__form__content > form").submit(function(b){
    b.preventDefault();
    var c=jQuery("#first_name").val(),
    d=jQuery("#last_name").val(),
    f=(
        jQuery("#company").val(), jQuery("#phone").val()
      ),
    g=jQuery("#email").val(),
    h=/[0-9 -()+]+$/,
    i=new RegExp(/^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$/i);if(c&&d&&f&&g)
    {
        var j=a(window.location.search);
        return 
        j.utm_campaign&&jQuery("input[name=00N500000093d5K]").val(decodeURIComponent(j.utm_campaign)),
        j.utm_content&&jQuery("input[name=00N500000093d5t]").val(decodeURIComponent(j.utm_content)),
        j.utm_source?jQuery("input[name=00N500000093d4l]").val(decodeURIComponent(j.utm_source)):jQuery("input[name=00N500000093d4l]").val("Organic Web"),
        j.utm_term&&jQuery("input[name=00N500000093d5U]").val(decodeURIComponent(j.utm_term)),
        h.test(f)&&10===f.length?i.test(g)?(
            jQuery.ajax({
                type:"POST",
                url:"https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8",
                data:jQuery(this).serialize(),success:function(a){}}),
                void jQuery("#contactDraftModal").modal("show")):
                void alert("Please enter a valid email address."):
                void alert("Only enter numbers and do not use spaces eg. 1234567890")
    }
}),

jQuery(".purchase-now").click(function(){
    jQuery("html, body").animate({scrollTop:jQuery("#pkg").offset().top-130},500)
})
jQuery(".purchase-now").click(function(){
    jQuery("html, body").animate({scrollTop:jQuery("#pbgit").offset().top-130},500)
})
});

我记得关于代码的几个笔记: 最终,表单数据由function(b)捕获,然后提交到function a(a),然后由AJAX发布到Salesforce脚本。至少我认为这是正在发生的事情!我最初没有写这段代码。

在第二组代码中,表单不允许您在“名字”字段中提交数字,但表单根本不提交。即使验证了字段。

我认为这个问题与jQuery Validate规则有关。我最初没有编写此代码,我从未见过使用first_name: "required"进行jQuery验证。我总是将其视为first_name: {required: true}

所以我认为在第二个代码中使用first_name规则格式化我的方式会产生问题。

我仍然是jQuery和后端这样的东西的菜鸟。我花了两天时间才了解代码的内容!

任何帮助都会很棒!!!

更新: 我改变了所有的规则,不是速记。现在表单将提交,但即使名字字段无效也是如此。它会在字段下面给出“无效格式”消息,但无论如何都要提交表单。

rules: {
    first_name: {
        required: true,
        pattern: "^[a-zA-Z_]*$"
    },
    last_name: {
        required: true
    },
    checkbox:{
        required: true
    },
    phone: {
        required: true, number: true
    },
    email:{required: true, email: true},
    errorPlacement:function(error, element){
        if(element.attr("type") == "checkbox")
            {error.appendTo(('.checkError'));
        }
        else{error.insertAfter(element);}
    }
}

0 个答案:

没有答案