如何显示setCustomValidity消息/提示没有提交事件(How to show setCu

2019-06-18 11:52发布

我使用的形式基本验证检查,如果邮件是正确的格式,然后将数据通过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