必需属性在Safari浏览器中不起作用 [英] Required Attribute Not work in Safari Browser

问题描述

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

 < form action =method =POST> 
< input required />您的名字：
< br /> 
< input type =submit/> 
< / form> 
  

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

您可以让我知道JavaScript代码或任何workarround吗？ JavaScript中的新功能

谢谢 解析方案

不支持此属性，您需要使用JavaScript。这个页面包含一个hacky解决方案，它应该添加所需的功能：

http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/#toc-safari

HTML ：

 < form action =method =POSTid =formID> 
您的名字：< input required =true/> 
< br /> 
< input type =submit/> 
< / form> 
  

JavaScript：

  var form = document.getElementById（'formID'）; //表单必须有ID：< form id =formID> 
 form.noValidate = true; 
 form.addEventListener（'submit'，function（event）{//监听表单提交
 if（！event.target.checkValidity（））{
 event.preventDefault（）; / /关闭默认功能
 alert（'请填写表单'）; //错误信息
} 
}，false）; 
  

您可以用某种不那么难看的警告来替换警报，例如显示带有错误信息的DIV：

  document.getElementById（'errorMessageDiv'）。style.display ='block'; 
  

和HTML：

 < div id =errorMessageDivstyle =display：block;>请填写表单。< / div> 
  

（style属性的内容应该在CSS文件中）

这种方法的唯一缺点是它不能处理需要填充的确切输入。这将需要一个循环遍历表格中的所有输入并检查值（更好，检查必需属性的存在）。

I have tried following code for make the required field to notify the required field but its not working in safari browser. Code:

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

Above the code work in firefox. http://jsfiddle.net/X8UXQ/179/

Can you let me know the javascript code or any workarround? am new in javascript

Thanks

解决方案

Safari does not support this attribute, you need to use JavaScript. This page contains a hacky solution, that should add the desired functionality:

http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/#toc-safari

HTML:

<form action="" method="POST" id="formID">
    Your name: <input  required = "true"/>
    <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);

You can replace the alert with some kind of less ugly warning, like show a DIV with error message:

document.getElementById('errorMessageDiv').style.display = 'block';

and in HTML:

<div id="errorMessageDiv" style="display:block;">Please, fill the form.</div>

(the contents of style attribute should be in CSS file)

The only drawback of this approach is it doesn't handle the exact input that needs to be filled. It would require a loop accross all inputs in the form and checking the value (and better, check for "required" attribute presence).

这篇关于必需属性在Safari浏览器中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！