仅在智能手机和平板电脑上回发 ajax 请求

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 %>

输出匹配的生成名称，这可能是问题的一部分。它可能会说（在visual studio中）JS中存在格式错误，但这在执行时应该没有任何问题，因为它会保证匹配的名称。