Menu
Working on validation with ASP.Net webforms.
ASP.Net by default adds a form at root level. Which mean we need to add all the controls with in the form only.
However I need to define a small portion of the page which requires validation, I used jQuery validation plugin.
HTML
<html>
<body>
<form method="post" action="AssetDetails.aspx" id="Form1" enctype="multipart/form-
data">
//Other page content goes here. which doesnt require validation
<form class="form-horizontal" id="validation-form" method="get">
<div class="row-fluid">
<div class="widget-header header-color-blue2">
<h5>
Step 1</h5>
</div>
<input type="email" name="ctl00$MainContent$AssetTabs$DefineCriticality$email" id="email" class="span6" />
</div>
</form>
</form>
</body></html>
Javascript
$(document).ready(function(){
alert($('#validation-form').length); // gives 0, because this form nested under
another form generated by ASP.Net
$('#validation-form').validate({
errorElement: 'span',
errorClass: 'help-inline',
focusInvalid: false,
rules: {
email: {
required: true,
email: true
}},
messages: {
email: {
required: "Please provide a valid email.",
email: "Please provide a valid email."
}},
errorPlacement: function (error, element) {
error.insertAfter(element);
}
});
});
But the problem is, I am getting error this[0] is undefined in jquery validation file. I found that #validation-form is not found in the DOM, since this form is inside that stupid ASP.Net generated root(parent) element.
How do we handle this?
Is there a way we validate element using jQuery validate plugin with out a form?
Edit: Got some Workaround Solution:
Finally I made this work with parent form and adding rules based on the field name. Once again ASP.Net webform started giving trouble by generating control name field differently.
Here is the work around code.
var validationParams = {
errorElement: 'span',
errorClass: 'help-inline',
focusInvalid: false,
rules: {},
messages: {},
invalidHandler: function (event, validator) {
$('.alert-error', $('.login-form')).show();
},
highlight: function (e) {
$(e).closest('.control-group').removeClass('info').addClass('error');
},
success: function (e) {
$(e).closest('.control-group').removeClass('error').addClass('info');
$(e).remove();
},
errorPlacement: function (error, element) {
error.insertAfter(element);
},
submitHandler: function (form) {
},
invalidHandler: function (form) {
}
};
var emailFieldName = $('#email').attr('name');
validationParams['rules'][emailFieldName] = { required: true };
validationParams['messages'][emailFieldName] = { required: "Email is required" };
$('#Form1').validate(validationParams);
Is there any other better way of doing it?
843
I am not telling you other options, but what you asked, if you can use validate plugin without form.
It is absolutely required that you have <form></form> tags for the jQuery Validate plugin to function properly, or at all.
If you use ajax, you must [put your ajax inside the submitHandler of the jQuery Validate plugin
You can remove or block the action and still use jQuery Validate.
You can put your ajax and a return false in the submitHandler and no regular submission will occur:
$(document).ready(function() {
$('#myform').validate({ // initialize plugin
// your rules & options,
submitHandler: function(form) {
// your ajax would go here
return false; // blocks regular submit since you have ajax
}
});
});
See demo: http://jsfiddle.net/NEPsc/5/
85
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
