Question

我在jquery中用联系表单编写了一些代码来验证表单，如果表单有效，则将所有数据发送到另一个发送包含所有数据的电子邮件的文件等。现在，如果我在PC上使用该表格，它可以工作，但如果我在平板电脑或智能手机上使用该表格，无论是android还是ios，我的网站都会进行回发，并且忽略验证。

以下是验证表单

的代码部分

$('#bottone_invia_messaggio').on("click", function () {

    $("#formPrincipale").validate({

        submitHandler: function () {
            $('#bottone_invia_messaggio').val("Loading")
            var urlContatti = "url of a site";
            $.ajax({
                type: "POST",
                url: urlContatti,
                success: function () {
                    $('#bottone_invia_messaggio').val("Messaggio inviato");
                    $('#bottone_invia_messaggio').addClass("btn-success");
                    $('#bottone_invia_messaggio').prop('disabled', true);
                    inviaContatto($("#Nome").val(), $("#Email").val(), $("#Telefono").val(), $("#Messaggio").val());
                    registraEmailDb($("#Email").val());
                }
            });


        },
        onkeyup: false,
        onclick: false,
        rules: {
            ctl00$Nome: {
                required: true,
                minlength: 2
            },
            ctl00$Email: {
                required: true,
                email: true
            },
            ctl00$Telefono: {
                required: true
            },
            ctl00$Messaggio: {
                required: true,
                minlength: 10
            },
            ctl00$Privacy: {
                required: true
            }
        },
        messages: {
            ctl00$Nome: {
                required: "Per favore inserisci il nome",
                minlength: "Sembra troppo corto"
            },
            ctl00$Email: {
                required: "Indicaci la tua email",
                email: "Email non valida"
            },
            ctl00$Telefono: {
                required: "Inserisci un numero di telefono"
            },
            ctl00$Messaggio: {
                required: "",
                minlength: "Il messaggio e' troppo corto"
            },
            ctl00$Privacy: {
                required: "***"
            }
        },
        errorPlacement: function (error, element) {
            if (!$(element).parent().is("span")) error.insertBefore(element);
            else error.insertAfter($(element).parent());


        },
        errorElement: "span",
        highlight: function (element) {
            $(element).parent().removeClass("valid").addClass("has-error");
            $(element).removeClass("valid");

        },
        success: function (element) {
            if (!($(element).parent().is("span") || $(element).is("span"))) $(element).parent().removeClass("has-error").addClass("valid");
            console.log($(element).parent());
        }
    });
    $("#formPrincipale").attr("novalidate", "");

});

以下是asp.net生成的html服务器端部分

<div id="Contatti" class="formContatti"><div class="row"><div class="col-lg-6"><div class="mb-1"><input name="ctl00$Nome" id="Nome" class="form-control" placeholder="Nome e Cognome*" type="text"></div><div class="mb-1"><input name="ctl00$Email" id="Email" class="form-control" placeholder="Indirizzo Email*" type="text"></div><div class="mb-1"><input name="ctl00$Telefono" id="Telefono" class="form-control" placeholder="Telefono*" type="text"></div></div><div class="col-lg-6"><textarea name="ctl00$Messaggio" rows="2" cols="20" id="Messaggio" class="form-control h-100" placeholder="Messaggio*"></textarea></div></div><div class="col-12 mt-1 text-left"><span><input id="Privacy" name="ctl00$Privacy" type="checkbox"><label for="Privacy">*Accetto i termini sulla <a class="no-decoration" href="/privacy-terms">privacy</a></label></span></div><div class="d-flex flex-row-reverse"><button id="bottone_invia_messaggio" class="btn coloreTasto mt-2">Invia il messaggio</button></div></div>

很抱歉，如果我没有发布所有代码，但是有很多敏感数据而且很长。任何人都可以帮助我吗？

Answer 1

从生成的角度来看，输出的内容可能会输出一个不同的名称，这对ASP.NET来说是一个挑战（因为你没有控制权）。如果您的JS代码是在ASPX中定义的，则可以通过将<%= %>表示法与控件的UniqueID组合使用来保证匹配，如下所示：

rules: {
    <%= Nome.UniqueID %>: {
            required: true,
            minlength: 2
    },
    <%= Email.UniqueID %>: {
            required: true,
            email: true
    },
    ...

语法

<%= Email.UniqueID %>

输出匹配的生成名称，这可能是问题的一部分。它可能会说（在视觉工作室中）JS中存在格式错误，但这不应该在执行上有任何问题，因为它将保证匹配的名称。

回复ajax只请求智能手机和平板电脑

1 个答案: