Geek Answers Handbook

JQuery validation element without form

Working with validation using ASP.Net web forms.

ASP.Net by default adds the form at the root level. This means that we need to add all controls only in the form.

However, I need to identify a small part of the page that needs validation; I used the 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 that I get this[0] is undefined error in jquery validation file. I found that #validation-form not found in the DOM, since this form is inside this stupid ASP.Net created root (parent) element.

How do we deal with this?

Is there a way to validate an element using jQuery validate plugin with form?

Edit: some solution appeared:

Finally, I did this work with the parent form and added rules based on the field name. Again, the ASP.Net web form began to create problems by creating the control name field in different ways.

Here is the work around the 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 to do this?

+7
jquery html jquery-validate
source share
1 answer

I am not telling you other options, but what you asked for if you can use the validate plugin without a form.

It is absolutely imperative that you have <form></form> tags for the jQuery Validate plugin to function properly or in general.

If you use ajax , you must [place your ajax inside the submitHandler the jQuery Validate plugin

You can remove or block action and use jQuery Validate.

You can put your ajax and return false in submitHandler and no regular passing will be executed:

 $(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/

0
source share

More articles:


All Articles