I have a view with a form that uses the unobtrusive client side validation in asp.net mvc 3 to validate the form fields.
I also have a custom jquery script to submit the form via ajax
$(document).ready(function () {
$('#Submit').click(function (event) {
/* collect form input values as json*/
/* post the json data via ajax */
event.preventDefault();
event.stopPropagation();
});
});
My question is how can I change the order of the event handlers so that the asp.net mvc 3 client side validation gets called before my ajax form post handler so that the asp.net mvc handler can prevent my handler from getting called if there are any validation errors.
The problem I am having is that the asp.net mvc 3 unobtrusive javascript validation event handler is not triggered before my event handler.
By disabling the code at the end of my script that prevents further event propegation,
I can see that the asp.net mvc 3 client side validation is indeed getting triggered after my handler is executed.
You can call the method:
$('form').valid()
inside your event.
Maybe this posts helps:
jquery newbie: combine validate with hidding submit button
https://stackoverflow.com/questions/4539302?tab=newest#tab-top
Related
I have a form in AEM. When the submit button is clicked control goes to forward.jsp. I have done some validations in forward.jsp and would like to generate on alert on the page once the validation is failed. How can I pass the alert to the page?
if(condition){
// validation success
} else{
// code for alert
}
FormsHelper.redirectToReferrer(slingRequest, slingResponse);
If you want to do the validation server-side, but show an alert client-side, I recommend you use JavaScript to make an AJAX call. You could change your submit button so that when it is clicked, it fires an AJAX call instead of submitting a form. See http://api.jquery.com/jquery.ajax/ for a description of how this could be done using jQuery, but other options would also work for making the AJAX request.
In the response to that AJAX request you can put whetever you need. It can be a status code, a string of JSON, or a blurb of HTML. You then would write client-side JavaScript to handle the response and do whatever is appropriate based on the given response--such as show an alert on the page.
An example of this sort of approach if seen at http://michaelsoriano.com/how-to-ajax-validate-forms/
This topic is more complicated that you might think. Basically you can see sample implementation in the foundation components such as /libs/foundation/components/form/text/text.jsp. They all use the com.day.cq.wcm.foundation.forms.LayoutHelper#printErrors method to check if they are errors on field. This is happening over the com.day.cq.wcm.foundation.forms.ValidationInfo class which is set as request attribute in order to transfer the field state between the different classes. You can check also the com.day.cq.wcm.foundation.forms.FieldHelper class which performs actually the validation. Putting some sort of logic in the forward.jsp is the wrong ways
According to the AngularJS doc's https://docs.angularjs.org/api/ng/directive/form
"For this reason, Angular prevents the default action (form submission to the server) unless the element has an action attribute specified."
is there any way to stop angularJS doing this?
If you don't want the form submission to go down the browser handled route don't put the action attribute on the form use the directive ng-submit which basically calls a method on your controller which will allow you to send the data to the server via a xhr request.
A simple get request made to url on my server which returns HTML of form which is put inside td element .
$('form').validate(); // jquery validation plugin initialized
//user clicks some button and ajax request is send to load form
$.get(url,send,function(form){
$('td').html(form).show();
});
Problem is validation plugin do not work on the loaded form ?
The form you are trying to validate does not exist when you initialise the plugin. Place the initialisation code in the success handler of the $.get(...).
All... I am working in a asp.net mvc2 project using MicrosoftMvcValidation...
I have some custom javascript that I need to run when a form gets posted... I am currently running this code when the submit button is clicked. However, when the client side validation fails I do not want to run the code.
I see this article on hooking into the validation but am unable to get it working.
ASP.NET MVC2 - hook into client side validation
Does anyone have advice on how to achieve the following.
When submit button pressed and client validation passes... run my custom code
When submit button pressed and client validation fails... do not run my custom code
u can use jquery validate like this $('#your_form_Id').valid() this will check if the form is valid and will return true if valid or else returns false.
See here the documentation : http://docs.jquery.com/Plugins/Validation/valid .
I would use jQuery for unobtrusive client-side validation. Take a look at this, it will help you get through what you're looking for
using asp.net mvc2, Data Annotations,
MicrosoftAjax.js,MicrosoftMvcValidation.js,
jquery for ajax
I have contact form and i am using Data Annotations for the ContactFormModel.
I add this line <% Html.EnableClientValidation(); %> to top of the form.
When i click the submit button client validation works perfectly. Now i have changed my mind and want to post the form with jQuery.Ajax.
This time i want to accomplish this.
Click submit button.
MicrosoftMVCValidation does the client validation and renders the errors on the clientside.
If Model is valid i meant if the validation passed i want my jQuery ajax to get involved.
But when i clicked the submit button both ajax post and mvc client validation works.
How can i get the things in right order.
1.Mvc Client validation
2. Then jQuery.Ajax Post.
var myForm = $("#MainForm");
var formContext = myForm[0]['__MVC_FormValidation'];
var errors;
if (formContext) {
// validate the form
errors = formContext.validate("submit");
}
if (!formContext || errors.length == 0) {
// no errors so submit to server
...
}