Search code examples
javascriptvalidationnotifyverify

Do notify/verify work without submit button?


I have a very simple form:

<form>
    <fieldset>
        <input id="in1" type="text" data-validate="required">
    </fieldset>
    <fieldset>
        <input id="in2" type="text" data-validate="required">
    </fieldset>
    <input id="btn" type="button" value="Insert your datas" onclick="insert()">
</form>

If third input (id:"btn") had type="submit", notify/verify would work well.

I don't need to submit this form (because I have to launch an insert() function on button onclick),

so I deleted the submit type of my button and unfortunately no notifications appear on my page now.

I may add an handler (like this: $(".elem-demo").notify("Hello Box")) as notify docs suggest, but that is a custom notification, good, but I want to take advantage of verify.js data-validate..no extra-code required for a simple validation like "required" or "number".

How can I fix that? I wish I was clear of my issue and thanks to answer me.


Solution

  • You can keep the button type submit and can override the default form submission behavior on submit button click via event.preventDefault()

    <form id="my-form" onSubmit="myFunction(event)">
        <fieldset>
            <input id="in1" type="text" data-validate="required">
        </fieldset>
        <fieldset>
            <input id="in2" type="text" data-validate="required">
        </fieldset>
        <input id="btn" type="submit" value="Insert your datas" onclick="insert()">
    </form>
    

    This your function which will be called on form submission.Access the form via its id and call validate to check form for errors. Calling validate will trigger validation on every element in the form. It accepts a callback function callback(success) which will be called after validation.

    function myFunction(e){
     e.preventDefault();
    
     $("#my-form").validate(callbackFunction);
    
     // call your other function
    
    }