Required does not work (.submit)

Navigation
-1

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

So long beauty ...

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

Would anyone have a solution to this problem?

    
asked by anonymous 04.01.2019 / 16:02

2 answers

2

There is an HTML5 checkValidity method that runs on validations with submit. Here 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><formid="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>

Alternatively, you could use the Jquery.validate lib, which I think is 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><scriptsrc="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>
    
04.01.2019 / 17:14
0

You could do a field validation when submitting by 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 

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

I hope I have helped.

    
04.01.2019 / 16:35
Graphic by ggplot in RStudio v 1.1.463 does not read subtitle and caption in labs () Problem Query Beego