How to check input text before post?

Question

Follows 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, and then post.

If input is white or empty, do not post.

If different than white, do post

Answer 1

Using jquery at the end of page loading:

$(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>

<input type="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'
            }
        }
    });  
});

Online Example

---

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>
<link href="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>
<script src="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>

Online Example

Answer 2

If you are not going to use any more complex validation, you can use required HTML5 Here no Javascript required. This way:

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