发表新帖
发表新帖

Trigger standard HTML5 validation (form) without using submit button?

前端 未结
关注
12 1366
攒了一身酷
攒了一身酷 2020-11-28 07:07

Anyone who know how I can trigger the standard HTML5 validation in a form without using a submit button? (JavaScript or jQuery).

I do not want to se

相关标签:
12条回答
  • 攒了一身酷
    2020-11-28 07:48

    i was using 

    objectName.addEventListener('click', function() {
event.preventDefault();
}

    but its show error "event is undefined" so in this case use event parameter like 

    objectName.addEventListener('click', function(event) {
event.preventDefault();
}

    now its works fine

    0 讨论(0)
  • 说谎
    2020-11-28 07:50

    As stated in the other answers use event.preventDefault() to prevent form submitting.

    To check the form before I wrote a little jQuery function you may use (note that the element needs an ID!)

    (function( $ ){
    $.fn.isValid = function() {
        return document.getElementById(this[0].id).checkValidity();
    };
})( jQuery );

    example usage

     $('#submitBtn').click( function(e){

        if ($('#registerForm').isValid()){
            // do the request
        } else {
            e.preventDefault();
        }
    });
    0 讨论(0)
  • 佛祖请我去吃肉
    2020-11-28 07:52

    Try HTMLFormElement.reportValidity() where this function will invoke the input validations.

    0 讨论(0)
  • 南笙
    2020-11-28 07:55

    After some research, I've came up with the following code that should be the answer to your question. (At least it worked for me)

    Use this piece of code first. The $(document).ready makes sure the code is executed when the form is loaded into the DOM:

    $(document).ready(function()
{
    $('#theIdOfMyForm').submit(function(event){
        if(!this.checkValidity())
        {
            event.preventDefault();
        }
    });
});

    Then just call $('#theIdOfMyForm').submit(); in your code.

    UPDATE

    If you actually want to show which field the user had wrong in the form then add the following code after event.preventDefault();

    $('#theIdOfMyForm :input:visible[required="required"]').each(function()
{
    if(!this.validity.valid)
    {
        $(this).focus();
        // break
        return false;
    }
});

    It will give focus on the first invalid input.

    0 讨论(0)
  • 逝去的感伤
    2020-11-28 07:57

    You have to submit the form to get the html5 validation to work. There's a way around it to get what you want. Se the code: 

    <body>
    <h1>Validation Example</h1><br />
    <h2>Insert just 1 digit<h2>
    <form id="form" onsubmit="return false">
        <label>Input<input type="text" pattern="[0-9]" id="input" /></label> 
        <input type="submit" class="hide" id="inputButton">         
    </form>
</body>

    See an example here

    Note: using form.submit() didn't work for me. So i created a hidden submit button, that triggers on keyup. Don't ask me why. Maybe someone could clarify it.

    0 讨论(0)
  • 谎友^
    2020-11-28 08:04

    You can use reportValidity, however it has poor browser support yet. It works on Chrome, Opera and Firefox but not on IE nor Edge or Safari:

    var myform = $("#my-form")[0];
if (!myform.checkValidity()) {
    if (myform.reportValidity) {
        myform.reportValidity();
    } else {
        //warn IE users somehow
    }
}

    (checkValidity has better support, but does not work on IE<10 neither.)

    0 讨论(0)
 看不清?
提交回复
热议问题