javascript - $ ("form").submit 在 ipad 和 iphone 上不起作用

Question

我有一个简单的帖子表单，可以在所有浏览器中使用，但是当它到达 ipad/iphone 时(顺便说一下，我是 iOS 这个世界的新手)，我遇到了问题。

<form action="/Home/Contact" id="contactform" method="post" novalidate="novalidate">                
<div class="response"></div>
    <p>
        <input class="textfield" data-val="true" data-val-length="The Name must be 50 characters or less" data-val-length-max="50" data-val-regex="The Name should not contain special characters" data-val-regex-pattern="^[A-Za-z0-9-_ ]+$" data-val-required="The Name field is required." id="Name" name="Name" placeholder="Name" type="text" value="">
        </p><div class="error-holder"><span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span></div>
    <p></p>
    <p>
        <input class="textfield" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-length="The Email must be 200 characters or less" data-val-length-max="200" data-val-required="The Email field is required." id="Email" name="Email" placeholder="Email" type="text" value="">
        </p><div class="error-holder"><span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span></div>
    <p></p>
    <p>
        <input class="textfield" data-val="true" data-val-length="The Subject must be 255 characters or less" data-val-length-max="255" data-val-required="The Subject field is required." id="Subject" name="Subject" placeholder="Subject" type="text" value="">
        </p><div class="error-holder"><span class="field-validation-valid" data-valmsg-for="Subject" data-valmsg-replace="true"></span></div>
    <p></p>
    <p>
        <textarea class="textarea" cols="20" data-val="true" data-val-length="The Message must be 2000 characters or less" data-val-length-max="2000" data-val-required="The Message field is required." id="Message" name="Message" placeholder="Message" rows="8"></textarea>
        </p><div class="error-holder"><span class="field-validation-valid" data-valmsg-for="Message" data-valmsg-replace="true"></span></div>
    <p></p>
    <p>
        <button type="submit" name="submit" id="submitButton" title="Click here to submit your message!" class="btn btn-red">Submit</button>
    </p>
</form>

iPad 和 iPhone safari 浏览器忽略了 jquery $("form").submit 并将表单直接发布到 Controller 。

这是我的提交代码:

$("form").submit(function(e){

        if (!$("form").valid()) 
            return false;   

        var name = $('input#Name').val();
        var email = $('input#Email').val();
        var subject = $('input#Subject').val();
        var message = $('textarea#Message').val();
        $.ajax({
            type: 'post',
            url: '/home/contact',
            data: JSON.stringify({ name: name, email: email, subject: subject, message: message }),
            contentType: "application/json; charset=utf-8", 
            dataType: "json",
            cache: false,
            success: function(result) {
                //do stuff
            },
            error: function(result) {                                   
                //do stuff
            }               
        })

        return false;
    });

当我点击提交时，代码根本没有执行。

更新1:

如果我更改为 $("#contactform").submit(...) 或 $("#submitButton").click(...)在 iPhone 和 iPad 上仍然没有运气

更新2

如果我像 @Sridhar-R 一样使用 action="javascript:chk()" ，那么它就可以工作。但是为什么 javascript post 在 action="/Home/Contact" 时不起作用 - 这都是因为在 iphone/ipad 中 javascript post 只能这样工作吗？

Answer 1

试试这个

<form action="javascript:chk()" id="contactform" method="post" novalidate="novalidate">                
<div class="response"></div>
    <p>
        <input class="textfield" data-val="true" data-val-length="The Name must be 50 characters or less" data-val-length-max="50" data-val-regex="The Name should not contain special characters" data-val-regex-pattern="^[A-Za-z0-9-_ ]+$" data-val-required="The Name field is required." id="Name" name="Name" placeholder="Name" type="text" value="">
        </p><div class="error-holder"><span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span></div>
    <p></p>
    <p>
        <input class="textfield" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-length="The Email must be 200 characters or less" data-val-length-max="200" data-val-required="The Email field is required." id="Email" name="Email" placeholder="Email" type="text" value="">
        </p><div class="error-holder"><span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span></div>
    <p></p>
    <p>
        <input class="textfield" data-val="true" data-val-length="The Subject must be 255 characters or less" data-val-length-max="255" data-val-required="The Subject field is required." id="Subject" name="Subject" placeholder="Subject" type="text" value="">
        </p><div class="error-holder"><span class="field-validation-valid" data-valmsg-for="Subject" data-valmsg-replace="true"></span></div>
    <p></p>
    <p>
        <textarea class="textarea" cols="20" data-val="true" data-val-length="The Message must be 2000 characters or less" data-val-length-max="2000" data-val-required="The Message field is required." id="Message" name="Message" placeholder="Message" rows="8"></textarea>
        </p><div class="error-holder"><span class="field-validation-valid" data-valmsg-for="Message" data-valmsg-replace="true"></span></div>
    <p></p>
    <p>
        <button type="submit" name="submit" id="submitButton" title="Click here to submit your message!" class="btn btn-red">Submit</button>
    </p>
</form>

脚本

function chk(e){

    if (!$("form").valid()) 
        return false;   

    var name = $('input#Name').val();
    var email = $('input#Email').val();
    var subject = $('input#Subject').val();
    var message = $('textarea#Message').val();
    $.ajax({
        type: 'post',
        url: '/home/contact',
        data: JSON.stringify({ name: name, email: email, subject: subject, message: message }),
        contentType: "application/json; charset=utf-8", 
        dataType: "json",
        cache: false,
        success: function(result) {
            //do stuff
        },
        error: function(result) {                                   
            //do stuff
        }               
    })

    return false;
}