mkab mkab - 2 months ago 12
Javascript Question

Validate input text in bootstrap modal

I want to validate a form in a bootstrap modal without using any framework. It's actually a simple modal with only an input text and two buttons "Close" and "Send".
The user should type his/her name in the input box and click send. The form is the sent with the method post.

What I want to do is that, if the user doesn't enter anything in the input box of and clicks on the button "Send", the input box should have a red border circling it instead of the default blue border. Here's the code for my modal:

<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!--form-->

<form class = "form-horizontal" id="myForm" method="post" action="test.php" role="form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">My modal</h4>
</div>
<div class="modal-body">
<p>
Please enter your name:
</p>
<br/>

<div class="form-group">

<div class="col-lg-12">
<label class="control-label" for="firstname">Name</label>
<input type="text" class="form-control required" id="firstname" name="firstname">
</div>
</div>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="myFormSubmit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>


I tried using javascript to change the class of the input text to
has-error
but it doesn't produce the red outline. When I click on send it sends the empty value through the post method instead of
Here's my javascript code:

<script type="text/javascript">
$('#myForm').validate({
rules: {
name: {
minlength: 1,
required: true
},
},
highlight: function (element) {
$('#firstname').removeClass('has-success').addClass('has-error');
},
success: function (element) {
$('#firstname').removeClass('has-error').addClass('has-success');
}
});
</script>


I feel like I'm mixing a whole lot of things here. I'm still new to bootstrap and javascript. How can I go about getting the desired red outline?
Thanks.

Edit:
Validate function:

function validate() {
var x = document.forms["myForm"]["firstname"].value;
if (x == null || x == "") {
return false;
}
}

Answer

You need to change the CSS classes of the input parent element div.form-group, not the input itself:

The HTML after the submit button click should look like this:

<div class="form-group has-error">
   <div class="col-lg-12">
      <label class="control-label" for="firstname">Name</label>
      <input type="text" class="form-control required" id="firstname" name="firstname">
    </div>
</div>

To achieve this, alter your JavaScript code to this:

<script type="text/javascript">
  $('#myForm').on('submit', function(e) {
    var firstName = $('#firstname');

    // Check if there is an entered value
    if(!firstName.val()) {
      // Add errors highlight
      firstName.closest('.form-group').removeClass('has-success').addClass('has-error');

      // Stop submission of the form
      e.preventDefault();
    } else {
      // Remove the errors highlight
      firstName.closest('.form-group').removeClass('has-error').addClass('has-success');
    }
  });
</script>
Comments