mistery_girl mistery_girl - 5 months ago 311
jQuery Question

Validate field in Bootstrap modal

I'm using Laravel 5.2 and Bootstrap to create a modal dialog. I'm trying to validate

content
field but it doesn't add
error
class to it.

Here's my code:



$(document).ready(function() {
$('.save-link').on('click', function() {
$('#linkModal').modal({
backdrop: 'static',
keyboard: false
})
});
$('#save_form').on('keyup', function() {
$("#save_form").validate({
rules: {
content: "required"
},
messages: {
content: "required"
}
});
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
{{Form::open(['method' => 'POST', 'id' => 'save_form'])}}
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="modal" id="linkModal" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">
Add link
</h4>
</div>
<div class="modal-body">

<div class="content-wrapper2">
{{Form::text('content', null, ['class' => 'required content-wrapper col-md-11 form-control', 'id' => 'content'])}}
</div>
</div>
<div class="modal-footer">
{{Form::button('Save', ['class' => 'btn btn-primary', 'id' => 'save'])}}
</div>
</div>

</div>
</div>
{{Form::close()}}





Updated:
I did it in this way:



$(document).ready(function() {


$('.save-link').on('click', function() {
$('#linkModal').modal({
backdrop: 'static',
keyboard: false
})
});

$('#save').on('click', function() {
customValidate();

});
$('#linkModal').on('keyup', function() {
customValidate();

});
});

<meta name="csrf-token" content="{{ csrf_token() }}">
<form class="modal fade" id="linkModal" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">
Add link
</h4>
</div>
<div class="modal-body">

<div class="form-group content-wrapper2">
{{Form::text('content', null, ['class' => 'form-control required content-wrapper col-md-11', 'id' => 'content'])}}
</div>
</div>
<div class="modal-footer">
{{Form::button('Save', ['class' => 'btn btn-primary', 'id' => 'save'])}}
</div>
</div>

</div>
</form>





and it's working, I don't know why it isn't working with jquery validate.

Answer

I'm opting to use the parsley jQuery validation library here. Seems to work well and will just require some styling of the error output. You can find the documentation on it at parsleyjs.org. It's the most elegant I can find in the time.

Please see this fiddle.

I've abandoned the use of the laravel collective form helper. I think it is nice in a certain niche situation but for the most part is overengineering and confusing to read.

The javascript is simple:

$(document).ready(function () {
  $("#save-link-form").parsley();
  $("#save-link-form").submit(function (e) {
    e.preventDefault();
    console.log("submitted successfully");
  });
});

You will want to remove the e.preventDefault() and log, and modify it however you wish the form to be submitted, whether by AJAX or, if not - removing the submit event callback entirely.

Options for parsley can be put into the form elements themselves using the parsley syntax, but it also overrides default HTML 5 validation as well nicely, so you can use attributes like required and type="url" without the lame HTML 5 validation taking precedence, but keeping the intuitive HTML 5 syntax.

Comments