Question

我已经尝试使用以下代码来使必填字段通知必填字段，但它在Safari浏览器中不起作用。代码：

 <form action="" method="POST">
        <input  required />Your name:
        <br />
        <input type="submit" />
    </form>

在firefox上面的代码工作。 http://jsfiddle.net/X8UXQ/179/

你能让我知道javascript代码或任何workarround吗？我是javascript新手

由于

Answer 1

Safari，自2017年3月26日起最高版本10.1，不支持此属性，您需要使用JavaScript。

此页面包含一个hacky解决方案，应该添加所需的功能：http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/#toc-safari

HTML：

<form action="" method="post" id="formID">
    <label>Your name: <input required></label><br>
    <label>Your age: <input required></label><br>
    <input type="submit">
</form>

JavaScript的：

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);

您可以使用某种不那么丑陋的警告替换警报，例如显示带有错误消息的DIV：

document.getElementById('errorMessageDiv').classList.remove("hidden");

并在CSS中：

.hidden {
    display: none;
}

并在HTML中：

<div id="errorMessageDiv" class="hidden">Please, fill the form.</div>

这种方法的唯一缺点是它无法处理需要填充的确切输入。它需要在表单中的所有输入上进行循环并检查值（更好的是，检查“required”属性是否存在）。

循环可能如下所示：

var elems = form.querySelectorAll("input,textarea,select");
for (var i = 0; i < elems.length; i++) {
    if (elems[i].required && elems[i].value.length === 0) {
        alert('Please, fill the form'); // error message
        break; // show error message only once
    }
}

Answer 2

如果你使用jQuery，那么下面的代码要好得多。只需将此代码放在jquery.min.js文件的底部，它就适用于每个表单。

只需将此代码放在您的公共.js文件中，然后在此文件jquery.js或jquery.min.js之后嵌入

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

    var ref = $(this).find("[required]");

    $(ref).each(function(){
        if ( $(this).val() == '' )
        {
            alert("Required field should not be blank.");

            $(this).focus();

            e.preventDefault();
            return false;
        }
    });  return true;
});

此代码适用于那些不支持必需（html5）属性的浏览器

有一个很好的编码日朋友。

Answer 3

Safari遇到了同样的问题，我只能请大家看看Webshim！

我找到了这个问题的解决方案，对于这个one非常有用，但是如果你想＆＃34;模拟＆＃34; Safari的原生HTML5输入验证，Webshim为您节省了大量时间。

Webshim提供了一些＆＃34;升级＆＃34;用于Safari并帮助它处理HMTL5日期选择器或表单验证等内容。它不仅易于实现，而且看起来还不错，可以立即使用它。

对于webshim here的初始设置，也是有用的答案！链接帖子的副本：

此时，Safari并不支持＆＃34;必需＆＃34;输入属性。 http://caniuse.com/#search=required

使用＆＃39; required＆＃39; Safari上的属性，您可以使用＆＃39; webshim＆＃39;

1 - 下载webshim

2 - 输入此代码：

<head>
    <script src="js/jquery.js"></script>
    <script src="js-webshim/minified/polyfiller.js"></script>
    <script> 
        webshim.activeLang('en');
        webshims.polyfill('forms');
        webshims.cfg.no$Switch = true;
    </script>
</head>

Answer 4

我在@Roni之上构建了一个解决方案。

似乎Webshim是deprecating，因为它与jquery 3.0不兼容。

了解Safari确实验证了所需的属性非常重要。不同之处在于它的功能。它不是阻止提交并在输入旁边显示错误消息工具提示，而只是让表单流继续。

话虽如此，checkValidity（）在Safari中实现，如果未满足所需的字段，则会返回false。

所以，为了“修复它”并且还显示一个错误消息，干预最少（没有额外的Div用于保存错误消息）并且没有额外的库（除了jQuery，但我相信它可以在普通的javascript中完成）。，我使用占位符来显示标准错误消息。

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

  if (!e.target.checkValidity()) {
    console.log("I am Safari"); // Safari continues with form regardless of checkValidity being false
    e.preventDefault(); // dismiss the default functionality

    $('#yourFormId :input:visible[required="required"]').each(function () {
      if (!this.validity.valid) {
        $(this).focus();
        $(this).attr("placeholder", this.validationMessage).addClass('placeholderError');
        $(this).val(''); // clear value so it shows error message on Placeholder.
        return false;
      }
    });
    return; // its invalid, don't continue with submission
  }

  e.preventDefault(); // have to add it again as Chrome, Firefox will never see above
}

Answer 5

我找到了一个很棒的博客文章，解决了这个问题。它以一种我更舒服的方式解决它，并提供比其他建议更好的用户体验。它将更改字段的背景颜色以表示输入是否有效。

<强> CSS：

/* .invalid class prevents CSS from automatically applying */
.invalid input:required:invalid {
    background: #BE4C54;
}
.invalid textarea:required:invalid {
    background: #BE4C54;
}
.invalid select:required:invalid {
    background: #BE4C54;
}
/* Mark valid inputs during .invalid state */
.invalid input:required:valid {
    background: #17D654 ;
}
.invalid textarea:required:valid {
    background: #17D654 ;
}
.invalid select:required:valid {
    background: #17D654 ;
}

<强> JS：

$(function () {
    if (hasHtml5Validation()) {
        $('.validate-form').submit(function (e) {
            if (!this.checkValidity()) {
                // Prevent default stops form from firing
                e.preventDefault();
                $(this).addClass('invalid');
                $('#status').html('invalid');
            }
            else {
                $(this).removeClass('invalid');
                $('#status').html('submitted');
            }
        });
    }
});

function hasHtml5Validation () {
    return typeof document.createElement('input').checkValidity === 'function';
}

信用：http://blueashes.com/2013/web-development/html5-form-validation-fallback/

（注意：我确实从帖子中扩展了CSS以覆盖textarea并选择字段）

Answer 6

我使用此解决方案并且工作正常

$('#idForm').click(function(e) {
    e.preventDefault();
    var sendModalForm = true;
    $('[required]').each(function() {
        if ($(this).val() == '') {
            sendModalForm = false;
            alert("Required field should not be blank."); // or $('.error-message').show();
        }
    });

    if (sendModalForm) {
        $('#idForm').submit();
    }
});

Answer 7

2017年3月26日发布的新Safari 10.1现在支持“必需”属性。

http://caniuse.com/#search=required

Answer 8

您可以将此事件处理程序添加到表单中：

// Chrome and Firefox will not submit invalid forms
// so this code is for other browsers only (e.g. Safari). 
form.addEventListener('submit', function(event) {
    if (!event.target.checkValidity()) {
        event.preventDefault();
        var inputFields = form.querySelectorAll('input');
        for (i=0; i < inputFields.length; i++) {
            if (!inputFields[i].validity.valid) {
                inputFields[i].focus(); // set cursor to first invalid input field
                return false;
            }
        }
    }
}, false);

Answer 9

在每个（）函数中，我在旧版本的PC Safari中找到了所有文本输入的DOM元素，我认为这个代码对MAC上的新版本有用，使用inputobj ['prpertyname']对象获取所有属性和值： / p>

    $('form').find("[required]").each(function(index, inputobj) {
        if (inputobj['required'] == true) { // check all required fields within the form
            currentValue = $(this).val();
            if (currentValue.length == 0) {
                // $.each((inputobj), function(input, obj) { alert(input + ' - ' + obj); }); // uncomment this row to alert names and values of DOM object
                var currentName = inputobj['placeholder']; // use for alerts
                return false // here is an empty input
            }
        }
    });

Answer 10

function customValidate(){
    var flag=true;
    var fields = $('#frm-add').find('[required]');  //get required field by form_ID

    for (var i=0; i< fields.length;i++){
      debugger
      if ($(fields[i]).val()==''){
        flag = false;
        $(fields[i]).focus();
      }
    }
    return flag;
  }


if (customValidate()){
// do yor work
 }

必需属性在Safari浏览器中不起作用

10 个答案: