How to check input text before posting?

Question

How to check input text before posting?

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

Follow the code:

@using (Html.BeginForm("Update", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form", enctype = "multipart/form-data" }))
{
.
.
.
<input type="text" name="lastname">
<input type="submit" class="btn btn-success" value="Criar" />
}

I want to check input using javascript or jquery, then post.

If input is blank or empty, do not post.

If it's different than white, make post

jquery asp.net-mvc-5

asked by anonymous 03.01.2017 / 00:07

2 answers

1

If you do not use any more complex validation, you can use required of HTML5 Here not being necessary JavaScript. This way:

<input type="text" name="lastname" required>
<input type="submit" class="btn btn-success" value="Criar">

03.01.2017 / 00:44

How to trigger pure javascript keydown event [closed] Remove setError after field is filled

score 1 · Accepted Answer

Using jquery at the end of page load:

$(function(){
  var status = !($("input[name=lastname]").length == 1);
  $("input[type=submit]").attr('disabled', status); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="text" name="lastname">
<input type="submit" class="btn btn-success" value="Criar" />

With jQuery and jQuery Validation

Form:

<form name="form1" id="form1">
  <input type="text" name="lastname" class="form-control" id="lastname" >
  <input type="submit" class="btn btn-success" value="Criar" />
</form>

Js:

$(document).ready(function() {
  $('#form1').validate({
        rules: {
            lastname: {
                required: true
            }
        },
        messages: {
            lastname: {
                required:'Digite o último nome'
            }
        }
    });  
});

Example Online

With jQuery and Bootstrap Validation

References:

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.8/validator.min.js
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.css

$(function(){
	$('#form1').validator();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.8/validator.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<form id="form1" data-toggle="validator">
    <div class="form-group">
        <label for="exampleInputEmail1">Nome</label>
        <input type="text" name="name" class="form-control" required />
    </div>
    <div class="form-group">
        <label for="exampleInputEmail1">Último nome</label>
        <input type="text" name="lastname" class="form-control" required />
    </div>
    <button class="btn btn-success btn-block" type="submit">Criar</button>
</form>

Example OnLine