我使用的形式基本验证检查,如果邮件是正确的格式,然后将数据通过Ajax的,它检查,如果电子邮件地址已在使用和选择框做了用户选择的国家/州或左默认值发送。
但对于HTML5表单验证,以完成提交所需的事件,当点击它是否能通过所执行的基本形式验证的Ajax操作提交,但是当结果出来的,我想使用相同的浏览器工具提示界面的一致性(和好,我怎么样他们看)。
那么,有没有办法让他们展现出来,我无法找到,如果有他们或一些特殊事件像射击提交事件,但停止它的时候了。 眼下场只得到一个红色的边缘,出现错误信息鼠标悬停在它,而工具提示会显示上再次单击提交按钮。
也为那些没有原生浏览器的提示(在我的情况下,Safari浏览器),我使用Webshims库和它的行为完全一样,在Chrome和Firefox浏览器。
Answer 1:
我想.checkValidity()
会做的伎俩,但它不会触发用户界面。
这听起来像.reportValidity()
会做你想要什么。 http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#dom-cva-reportvalidity
我不知道任何浏览器实现它尚未虽然:/
Answer 2:
You can find an answer at this link: How to force a html5 form validation without submitting it via jQuery
Basically, you find a submit button and call click on it:
// force form validation
document.getElementById("submitbutton").click()
You can also change validation message after checking if email address is in use or not and then force form validation as above:
document.getElementById("email").setCustomValidity("This email is already registered!");
document.getElementById("submitbutton").click()
Answer 3:
这其实很简单 - 一个隐藏的输入元素添加到您的表格:
<input type="hidden" id="myFormCheck" required="true" value=""/>
呼叫myInputField.setCustomValidity(message)
输入元素上要创建那么自定义提示打电话给你form.click();
形式有效性处理运行,并显示了该元素的弹出消息,但由于隐藏元素的形式将不提交,这样你就不会需要赶上并取消提交事件。
当你完成,真正准备好了,隐藏的元素上设置一个值,该形式将正常提交。
这样,您就可以使用表单工具提示类似检查可用的用户名,或通过一个HTTP请求匹配任何值等
Answer 4:
结帐这个链接( 提供HTML 5页使用setCustomValidity定制验证消息 )。
另外,在上述链接,他所使用的“输入”类型是数字和oninput他所谓的验证函数。 让我知道这是你在找什么。
<input type="number" required="true" value="50" min="18" max="60" step="1" oninput="validate(this)">
Answer 5:
一种用于填充工具HTMLFormElement.reportValidity()
测试了IE11和边缘。 但在下面的IE11 StackOverflow的沙箱中运行时,不显示验证消息。
function reportValidityPolyfill() { const button = createInvisibleSubmitButton(); this.appendChild(button); this.addEventListener("submit", submitEventHandler); var isValid = false; button.click(); this.removeEventListener("submit", submitEventHandler); this.removeChild(button); return isValid; function createInvisibleSubmitButton() { const button = document.createElement("button"); button.type = "submit"; button.style.display = "none"; return button; } function submitEventHandler(event) { event.preventDefault(); isValid = true; } } if (!HTMLFormElement.prototype.reportValidity) { HTMLFormElement.prototype.reportValidity = reportValidityPolyfill; console.log("ReportValidity polyfill installed."); } else { console.log("ReportValidity polyfill skipped."); }
input { outline: 1px solid #0f0; } input:invalid { outline: 1px solid #f00; }
<form id="form1"> Enter a number from 1 to 5: <input type="number" min="1" max="5" required> </form> <br> <div onclick="console.log('Validity: ' + document.getElementById('form1').reportValidity())"> Click here to call reportValidity() </div>
Answer 6:
由于大多数人说你必须使用input.setCustomValidity("message")
这里的问题是,你可以不检查范围内的验证submit
的事件,因为你需要做一个Ajax调用,然后设置setCustomValidity
异步。
所以基本上,你必须使用change
的输入域的事件,并就每一个变化Ajax调用。 或删除提交按钮,使用click
一个普通按钮的情况下,检查唯一的电子邮件在Ajax调用,然后调用通过JavaScript提交。
请参见使用jQuery的最后一个选项的例子:
<form action="/sign-in" id="form">
<input type="email" id="email" required/>
<button id="submit">Submit</button>
</form>
// we capture the click instead the submit
$("#submit").on("click",function(){
var $elem = $("#email");
var email = $elem.val();
//the ajax call returns true if the email exists
$.get( "ajax/checkUniqueEmail", function(data) {
if(data === "true"){
$elem.setCustomValidity("This email already exists.");
}else{
$elem.setCustomValidity("")
}
//then we submit the form
$("#form").submit();
});
});
Answer 7:
如果条件是假的,你可以使用setCustomValidity与元素(你可以做任何事件处理中,如按键或点击)。 如果输入无效,提交。 这将触发浏览器的消息提示。
Answer 8:
这里是一个不错的活生生的例子是定制验证/给出了一个表单输入反馈。
基本的JavaScript是这样的:
function checkPasscode() {
var passcode_input = document.querySelector("#passcode");
if (passcode_input.value != "Ivy") {
passcode_input.setCustomValidity("Wrong. It's 'Ivy'.");
} else {
passcode_input.setCustomValidity(""); // be sure to leave this empty!
alert("Correct!");
}
}
HTML:
<form>
<label for="passcode">Enter Passcode:</label>
<input id="passcode"
type="password"
placeholder="Your passcode"
oninput="checkPasscode();"
required/>
<button type="submit">Submit</button>
</form>
文章来源: How to show setCustomValidity message/tooltip without submit event