Question

我正在尝试编写移动版网站，因为我还不知道如何编写应用程序。事情进展顺利，直到我在Safari上用空白值尝试我的表格。

显然Safari甚至无法识别＆＃34; required＆＃34;标志，你必须跳过所有这些箍，让它工作。好吧，我的脚继续抓住篮球。

我假设我必须以某种方式使用jquery和.validate（）。然而，对于我的生活，我无法弄清楚。

我的表单很简单:(我会粘贴表单代码的整个部分，以防万一表单之外的某些内容无效：

$output .= '<div class="hidden_div" id="mobile_zip">';
$output .= '<center>
        <form id="shop_mobile" method="post" action="choose_location.php">
        <input placeholder="Delivery Zipcode" name="po_zip" type="text" required />
        <input type="hidden" name="ismobile" value="yes" />
        <br />
        <input type="submit" value="Start Order" />
        </form>
        </center>';
$output .= '</div>';

在Chrome Mobile上，IE常规版，Firefox版。我还没有对所有浏览器进行测试，但在我测试的每个浏览器上，上面的代码效果都很好。您无法点击提交而不填写邮政编码。然而，Safari失败了，因为大多数用户拥有iPhone，这对我的移动＆＃34;网站。我最大的问题，也可能是误解，就是当我把这段代码放到我的.js文件中时，它会一起停止工作（就像我错过了一个;或者）或者其他什么）

$("#shop_mobile").validate({rules:{"po_zip":{required: true}}, messages:{"po_zip":{required: "Please enter your name"}}});

当代码被注释掉时，我的.js工作，当它在那里时100％失败。所以这让我相信两件事中的一件：1）我不明白如何使用该代码，尽管有多个网站我已经查看了他们的代码以及它的使用方式或2）我无法弄清楚语法错误（在hehe之前发生过）

所以我的第一个问题是，我是否正在使用.validate权限，并且它会帮助我解决我的Safari问题，而不是识别HTML5＆＃34;必需＆＃34;属性。我的第二个问题假设第一个问题不是我的解决方案是，人们如何让他们的表格不允许移动野生动物园的空白！现在我知道我不是Paypal（嘿），但是当我在他们的网站上点击提交移动游猎时，它并没有让我通过！易趣，同样的事情。所以显然有办法解决这个问题。

我还尝试了另一种解决方案，它与制作所有表格有关＆＃34; novalidate＆＃34;然后以某种方式检查它们并以其他方式失败，但那打破了＆＃34; datepicker＆＃34;我也需要。

我真的希望解决方案与.validate（）有关，而我根据我所读过的内容错误地使用它，这似乎是可能的选择，但我花了3个小时研究我所做的一切都不会阻止Safari通过我的表单发布空白输入字段。

我有一个更大的表单，我需要在移动设备中验证更多的字段但如果我甚至无法让一个字段表单不让我过去，而不会破坏我的日期选择器，甚至没有看到更大的形成！

也许我只是在黑暗中，但我真的不能相信野生动物园会直接忽略HTML5属性。我觉得我还是很震惊。甚至桌面版也失败了。虚幻。我一直以为IE会让我努力工作。

编辑：这是我尝试的其他代码，它可以阻止空白表单提交，但它打破了jquery＆＃34; datepicker＆＃34; （日历永远不会弹出）

var form = document.getElementById('formID'); // form has to have ID: <form id="formID">
form.noValidate = true;
form.addEventListener('submit', function(event) { // listen for form submitting
    if (!event.target.checkValidity()) {
        event.preventDefault(); // dismiss the default functionality
        alert('Please, fill the form'); // error message
    }
}, false);

我从这里得到了：

Required Attribute Not work in Safari Browser

Answer 1

我无法获得像.validate或.h5validate那样的“技巧”。我似乎没有得到如何使用它们。

我开始工作的原因是：

    $("#shop_mobile").on("submit", function(e) {
    alert("Inside");
    zipinput = $("#po_zip").val();
    alert(zipinput);
    if (zipinput.match(/(^\d{5}$)/)) {
        document.getElementById("po_zip").className = document.getElementById   ("po_zip").className.replace( /(?:^|\s)ErrorRedBorder(?!\S)/g , '' )
        alert("MATCHED!");

    } else {
        document.getElementById("po_zip").className = "ErrorRedBorder";
        alert("NO MATCH!");
    }
    e.preventDefault();
});

并不像它应该的那样简单，但是它的工作原理并且老实说，它可能是一个更好的解决方案，因为javascript适用于所有平台，其中像“required”这样的浏览器技巧没有。我只需要做很多javascripting就可以正确处理我的所有表格：）

Answer 2

我写了这个jQuery脚本，感谢你的代码提供了一些帮助。＆＃34; e.preventDefault（）＆＃34;

您可以尝试使用此脚本。好的是它使用您在输入中定义的模式。

$('input[name="submit"]').click(function(e) {
$(':input').each(function(input) {
    if($(this).attr('required')) {
        var required = $(this);
        if(required.attr('pattern')) {
            required.css('background-color','inherit');
            var patt =  new RegExp(required.attr('pattern'),"i");
            if( !patt.test( required.val() ) ) {
                required.css('background-color','#f2dede');
                e.preventDefault();
                window.scroll(0,144);
            }
        }
        else {
            if(required.val() == '' || required.val() == null) {
                required.css('background-color','#f2dede');
                e.preventDefault();
                window.scroll(0,144);
            }
        }
    }
});});

表单验证 - Safari - .validate（）

2 个答案: