Use HTML5 form validation next to Jquery

Question

I need to validate a form using the browser property required. Only that there is a problem, my Submit button does not stay on the form. It has to stay out, and when I click on it I call the $('form[name="meu_form"]').submit() and when I do so it does not validate using the browser.

Example:

HTML

<!-- HTML -->
<form name="meu_form">
   Teste campo: <input type="text" name="teste" required />
   <br />
   <button type='submit'>Enviar que valida o required</button>
</form>

<button class='btnSubmit'>Enviar que não funciona a validação do required</button>

Javascript

//Javascript
$(function(){
    $('form[name="meu_form"]').submit(function () {
         alert('Aqui faço as chamadas ajax...');
    });

    $('.btnSubmit').click(function (){
        $('form[name="meu_form"]').submit();
    });
});

The problem occurs in the following scenario:

If I leave the input empty and I click the button inside the form, it validates, if I click on the outside it simply passes. There is how to validate this using the same validation of HTML, or I have to validate at hand, or else I don’t know, use a plugin for example jQuery Validator?

Answer 1

Conssegui, it’s kind of a gambit but it worked!

First I create the button inside the form with display none

After that I put the button off and call the . click with jquery on the element I put display None.

It follows code below for you to see how it turned out:

HTML

<!-- HTML -->
<form name="meu_form">
   Teste campo: <input type="text" name="teste" required />
   <br />
   <button type='submit' class='btnOrig' style='display: none;'>Enviar que valida o required</button>
</form>

<button class='btnSubmit'>Enviar que não funciona a validação do required</button>

Javascript

//Javascript
$(function(){
    $('form[name="meu_form"]').submit(function () {
        alert('Aqui faço as chamadas ajax...');

        return false;
    });

    $('.btnSubmit').click(function (){
        $('.btnOrig').click();
        //$('form[name="meu_form"]').submit();
    });
});

Note: I put an example on Jsfiddle link: https://jsfiddle.net/dvtqos8t/

Answer 2

There is a method checkValidity which is part of the HTML5 API. With it you can make the browser check the element. Not the whole form, but at least the elements one by one.

So in your code you can leak:

$('.btnSubmit').click(function (){
    var form = $('form[name="meu_form"]');
    var input = form.find('input[name="teste"]').get();
    if (input.checkValidity()) form.submit();
    else alert('Erro!');
});

Answer 3

Associate the button to your form by indicating a id at the form and calling her on button according to the code below:

<form name="meu_form" id="myForm">
   Teste campo: <input type="text" name="teste" required />
   <br />
   <button type='submit'>Enviar que valida o required</button>
</form>

<button class='btnSubmit' form="myForm">Enviar que não funciona a validação do required</button>