How to validate form without submitting the form. I am trying to tiger form validation on a click of button before sending data to server through Ajax.
I am able to send data to server but my client side validation is triggering.
Can some one help how to trigger the form validation without submitting the form .
I referred this post but it is not working
http://blog.nterms.com/2014/09/validate-yii2-forms-before-submitting.html
and this
http://www.mushtaqtahir.com/blog/3/yii2-ajax-form-submission
Can someone suggest how to tiger form validation using js
I don’t know how to call the validation directly but you can blur the elements telling yii to do it.
<button id="sendVlaidation" class="btn btn-success">Validate Form</button>
<script type="text/javascript">
$('#sendVlaidation').on('click', function() {
$('form :input').blur();
});
<script>
However, i think you meant to say it ISN’T triggering.
Regular form submittion via ajax.
The second example i posted will work on non multipart forms however, this one will not work on multipart forms.
$('#formId').on('beforeSubmit', function(event) {
event.preventDefault();
if ($(this).find('.has-error').length) {
return false;
} else {
$.ajax({
url: $(this).attr('action'),
type: $(this).attr('method'),
data: $(this)serialize(),
cache: false,
dataType: 'json',
error: function(xhr, status, error) {
alert('There was an error with your request! Error Type: ' + status + '. Error Message: ' + error + '.');
},
success: function(data) {
alert('Success...Do something.');
}
});
}
return false;
});
Ajax submit with multipart i.e. images / files
$('#formId').on('beforeSubmit', function(event) {
event.preventDefault();
if ($(this).find('.has-error').length) {
return false;
} else {
$.ajax({
url: $(this).attr('action'),
type: $(this).attr('method'),
data: new FormData($(this)[0]),
mimeType: 'multipart/form-data',
contentType: false,
cache: false,
processData: false,
dataType: 'json',
error: function(xhr, status, error) {
alert('There was an error with your request! Error Type: ' + status + '. Error Message: ' + error + '.');
},
success: function(data) {
alert('Success...Do something.');
}
});
}
return false;
});
If they don’t work you have an error somewhere else in your code. I just tried both of them and they work. Check your console for errors etc.
Thanks Skworden, I will try your code.