Required does not work (.Ubmit)

Question

I created a common form and put a button in which I had to call a Javascript for a certain situation and the button could not be type='submit'. So I put it as type='button', called the Javascript function and for Submit to be done, at the end of the condition, put a $('#form').submit();.

So far beauty...

The problem is that the fields, in which I put as required, in HTML are no longer being validated and are able to pass blank.

Someone would have a solution to this problem?

Answer 1

There is an HTML5 method checkValidity that is executed in Submit validations. Below is an example:

$(function() {
  $("#submitButton").click(function(e) {
    var $form = $("#loginform");

    if ( !$form.checkValidity ) {
      alert('Erro!!');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form id="loginform" class="login-form" action="{{ path('login') }}" method="post">
  <div class="form-group">
    <div class="input-icon">
      <i class="fa fa-user"></i>
      <input class="form-control" type="text" autocomplete="off" required name="_username" />
    </div>
  </div>
  <div class="form-group">
    <div class="input-icon">
      <i class="fa fa-lock"></i>
      <input class="form-control" type="password" autocomplete="off" required name="_password" />
    </div>
  </div>
  <div class="form-actions">
    <button id="submitButton" type="button" class="btn green pull-right">Enviar </button>
  </div>
</form>

Another alternative would be for you to use lib Jquery.validate, I find it safer and more customizable than HTML5 validation. See another example with the same form:

$(function() {
  $("#loginform").validate({
    rules: {
      _username: {
        required: true
      },
      _password: {
        required: true
      }
    },
  });

  $("#submitButton").click(function(e) {
    var $form = $("#loginform");

    if ( $form.valid() ) {
      alert('Sucesso!!')
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
<form id="loginform" class="login-form" action="{{ path('login') }}" method="post">
  <div class="form-group">
    <div class="input-icon">
      <i class="fa fa-user"></i>
      <input class="form-control" type="text" autocomplete="off" required name="_username" />
    </div>
  </div>
  <div class="form-group">
    <div class="input-icon">
      <i class="fa fa-lock"></i>
      <input class="form-control" type="password" autocomplete="off" required name="_password" />
    </div>
  </div>
  <div class="form-actions">
    <button id="submitButton" type="button" class="btn green pull-right">Enviar </button>
  </div>
</form>

Answer 2

You could do a field validation by doing Submit validating the fields:

$( "#form" ).submit(function( event ) {
    var campo = $("#campo").val;
    if(campo == "") {
        console.log("preencha o campo");
        return false;
    }
})

If you have more than one field, each can be used

$( "#form" ).submit(function( event ) {
    $(".campo").each(function() {    
        if ($($this).val() == '') { 
            console.log("preencha o campo");
            return false;
        }
     }    
});

I hope I’ve helped.