ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2017 www.aspforums.com. All rights reserved.Bootstrap validation for Registration Form using jQuery BootstrapValidator plugin in ASP.Net MVC<p>Refer the below link.</p> <p><a href="http://stackoverflow.com/questions/18296267/form-validation-with-bootstrap-jquery">http://stackoverflow.com/questions/18296267/form-validation-with-bootstrap-jquery</a></p> <p>&nbsp;</p>http://www.aspforums.net/Threads/194703/Bootstrap-validation-for-Registration-Form-using-jQuery-BootstrapValidator-plugin-in-ASPNet-MVC/http://www.aspforums.net/Threads/194703/Bootstrap-validation-for-Registration-Form-using-jQuery-BootstrapValidator-plugin-in-ASPNet-MVC/Mon, 05 Dec 2016 07:16:15 GMTBootstrap validation for Registration Form using jQuery BootstrapValidator plugin in ASP.Net MVC<p>Refer the below code.</p> <p>You can download the js and css from the below link.</p> <p><a href="http://twitterbootstrap.org/bootstrap-form-validation/">http://twitterbootstrap.org/bootstrap-form-validation/</a></p> <p>HTML</p> <pre class="brush: html">&lt;!doctype html&gt; &lt;!--[if lt IE 7]&gt; &lt;html class=&#34;no-js lt-ie9 lt-ie8 lt-ie7&#34; lang=&#34;&#34;&gt; &lt;![ENDif]--&gt; &lt;!--[if IE 7]&gt; &lt;html class=&#34;no-js lt-ie9 lt-ie8&#34; lang=&#34;&#34;&gt; &lt;![ENDif]--&gt; &lt;!--[if IE 8]&gt; &lt;html class=&#34;no-js lt-ie9&#34; lang=&#34;&#34;&gt; &lt;![ENDif]--&gt; &lt;!--[if gt IE 8]&gt;&lt;!--&gt; &lt;html class=&#34;no-js&#34; lang=&#34;en&#34;&gt; &lt;!--&lt;![ENDif]--&gt; &lt;head&gt; &lt;meta charset=&#34;utf-8&#34;&gt; &lt;meta http-equiv=&#34;X-UA-Compatible&#34; content=&#34;IE=edge&#34;&gt; &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1&#34;&gt; &lt;title&gt;bootstrap form validation&lt;/title&gt; &lt;link href=&#34;css/bootstrap.min.css&#34; rel=&#34;stylesheet&#34; type=&#34;text/css&#34; /&gt; &lt;link href=&#34;css/bootstrap-theme.min.css&#34; rel=&#34;stylesheet&#34; type=&#34;text/css&#34; /&gt; &lt;link href=&#34;css/style.css&#34; rel=&#34;stylesheet&#34; type=&#34;text/css&#34; /&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&#34;container&#34;&gt; &lt;div class=&#34;col-lg-9&#34;&gt; &lt;br&gt; &lt;script async src=&#34;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&#34;&gt;&lt;/script&gt; &lt;!-- homeyLink --&gt; &lt;ins class=&#34;adsbygoogle&#34; style=&#34;display:block&#34; data-ad-client=&#34;ca-pub-0173509626327009&#34; data-ad-slot=&#34;9233259299&#34; data-ad-format=&#34;link&#34;&gt;&lt;/ins&gt; &lt;script&gt; (adsbygoogle = window.adsbygoogle || []).push({}); &lt;/script&gt; &lt;br&gt; &lt;form class=&#34;form-horizontal&#34; action=&#34; &#34; method=&#34;post&#34; id=&#34;reg_form&#34;&gt; &lt;fieldset&gt; &lt;!-- Form Name --&gt; &lt;legend&gt; Personal Information &lt;/legend&gt; &lt;!-- Text input--&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label class=&#34;col-md-4 control-label&#34;&gt;First Name&lt;/label&gt; &lt;div class=&#34;col-md-6 inputGroupContainer&#34;&gt; &lt;div class=&#34;input-group&#34;&gt; &lt;span class=&#34;input-group-addon&#34;&gt;&lt;i class=&#34;glyphicon glyphicon-user&#34;&gt;&lt;/i&gt;&lt;/span&gt; &lt;input name=&#34;first_name&#34; placeholder=&#34;First Name&#34; class=&#34;form-control&#34; type=&#34;text&#34;&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Text input--&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label class=&#34;col-md-4 control-label&#34; &gt;Last Name&lt;/label&gt; &lt;div class=&#34;col-md-6 inputGroupContainer&#34;&gt; &lt;div class=&#34;input-group&#34;&gt; &lt;span class=&#34;input-group-addon&#34;&gt;&lt;i class=&#34;glyphicon glyphicon-user&#34;&gt;&lt;/i&gt;&lt;/span&gt; &lt;input name=&#34;last_name&#34; placeholder=&#34;Last Name&#34; class=&#34;form-control&#34; type=&#34;text&#34;&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Text input--&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label class=&#34;col-md-4 control-label&#34;&gt;Phone #&lt;/label&gt; &lt;div class=&#34;col-md-6 inputGroupContainer&#34;&gt; &lt;div class=&#34;input-group&#34;&gt; &lt;span class=&#34;input-group-addon&#34;&gt;&lt;i class=&#34;glyphicon glyphicon-earphone&#34;&gt;&lt;/i&gt;&lt;/span&gt; &lt;input name=&#34;phone&#34; placeholder=&#34;(845)555-1212&#34; class=&#34;form-control&#34; type=&#34;text&#34;&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Text input--&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label class=&#34;col-md-4 control-label&#34;&gt;Address&lt;/label&gt; &lt;div class=&#34;col-md-6 inputGroupContainer&#34;&gt; &lt;div class=&#34;input-group&#34;&gt; &lt;span class=&#34;input-group-addon&#34;&gt;&lt;i class=&#34;glyphicon glyphicon-home&#34;&gt;&lt;/i&gt;&lt;/span&gt; &lt;input name=&#34;address&#34; placeholder=&#34;Address&#34; class=&#34;form-control&#34; type=&#34;text&#34;&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Text input--&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label class=&#34;col-md-4 control-label&#34;&gt;City&lt;/label&gt; &lt;div class=&#34;col-md-6 inputGroupContainer&#34;&gt; &lt;div class=&#34;input-group&#34;&gt; &lt;span class=&#34;input-group-addon&#34;&gt;&lt;i class=&#34;glyphicon glyphicon-home&#34;&gt;&lt;/i&gt;&lt;/span&gt; &lt;input name=&#34;city&#34; placeholder=&#34;city&#34; class=&#34;form-control&#34; type=&#34;text&#34;&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Select Basic --&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label class=&#34;col-md-4 control-label&#34;&gt;State&lt;/label&gt; &lt;div class=&#34;col-md-6 selectContainer&#34;&gt; &lt;div class=&#34;input-group&#34;&gt; &lt;span class=&#34;input-group-addon&#34;&gt;&lt;i class=&#34;glyphicon glyphicon-list&#34;&gt;&lt;/i&gt;&lt;/span&gt; &lt;select name=&#34;state&#34; class=&#34;form-control selectpicker&#34; &gt; &lt;option value=&#34; &#34; &gt;Please select your state&lt;/option&gt; &lt;option&gt;Alabama&lt;/option&gt; &lt;option&gt;Alaska&lt;/option&gt; &lt;option &gt;Arizona&lt;/option&gt; &lt;option &gt;Arkansas&lt;/option&gt; &lt;option &gt;California&lt;/option&gt; &lt;option &gt;Colorado&lt;/option&gt; &lt;option &gt;Connecticut&lt;/option&gt; &lt;option &gt;Delaware&lt;/option&gt; &lt;option &gt;District of Columbia&lt;/option&gt; &lt;option&gt; Florida&lt;/option&gt; &lt;option &gt;Georgia&lt;/option&gt; &lt;option &gt;Hawaii&lt;/option&gt; &lt;option &gt;daho&lt;/option&gt; &lt;option &gt;Illinois&lt;/option&gt; &lt;option &gt;Indiana&lt;/option&gt; &lt;option &gt;Iowa&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Text input--&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label class=&#34;col-md-4 control-label&#34;&gt;Zip Code&lt;/label&gt; &lt;div class=&#34;col-md-6 inputGroupContainer&#34;&gt; &lt;div class=&#34;input-group&#34;&gt; &lt;span class=&#34;input-group-addon&#34;&gt;&lt;i class=&#34;glyphicon glyphicon-home&#34;&gt;&lt;/i&gt;&lt;/span&gt; &lt;input name=&#34;zip&#34; placeholder=&#34;Zip Code&#34; class=&#34;form-control&#34; type=&#34;text&#34;&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Text area --&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label class=&#34;col-md-4 control-label&#34;&gt;About &lt;/label&gt; &lt;div class=&#34;col-md-6 inputGroupContainer&#34;&gt; &lt;div class=&#34;input-group&#34;&gt; &lt;span class=&#34;input-group-addon&#34;&gt;&lt;i class=&#34;glyphicon glyphicon-pencil&#34;&gt;&lt;/i&gt;&lt;/span&gt; &lt;textarea class=&#34;form-control&#34; name=&#34;comment&#34; placeholder=&#34;About &#34;&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/fieldset&gt; &lt;legend&gt; Account information &lt;/legend&gt; &lt;fieldset&gt; &lt;!-- Text input--&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label class=&#34;col-md-4 control-label&#34;&gt;E-Mail&lt;/label&gt; &lt;div class=&#34;col-md-6 inputGroupContainer&#34;&gt; &lt;div class=&#34;input-group&#34;&gt; &lt;span class=&#34;input-group-addon&#34;&gt;&lt;i class=&#34;glyphicon glyphicon-envelope&#34;&gt;&lt;/i&gt;&lt;/span&gt; &lt;input name=&#34;email&#34; placeholder=&#34;E-Mail Address&#34; class=&#34;form-control&#34; type=&#34;text&#34;&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;form-group has-feedback&#34;&gt; &lt;label for=&#34;password&#34; class=&#34;col-md-4 control-label&#34;&gt; Password &lt;/label&gt; &lt;div class=&#34;col-md-6 inputGroupContainer&#34;&gt; &lt;div class=&#34;input-group&#34;&gt; &lt;span class=&#34;input-group-addon&#34;&gt;&lt;i class=&#34;glyphicon glyphicon-home&#34;&gt;&lt;/i&gt;&lt;/span&gt; &lt;input class=&#34;form-control&#34; id=&#34;userPw&#34; type=&#34;password&#34; placeholder=&#34;password&#34; name=&#34;password&#34; data-minLength=&#34;5&#34; data-error=&#34;some error&#34; required/&gt; &lt;span class=&#34;glyphicon form-control-feedback&#34;&gt;&lt;/span&gt; &lt;span class=&#34;help-block with-errors&#34;&gt;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;form-group has-feedback&#34;&gt; &lt;label for=&#34;confirmPassword&#34; class=&#34;col-md-4 control-label&#34;&gt; Confirm Password &lt;/label&gt; &lt;div class=&#34;col-md-6 inputGroupContainer&#34;&gt; &lt;div class=&#34;input-group&#34;&gt; &lt;span class=&#34;input-group-addon&#34;&gt;&lt;i class=&#34;glyphicon glyphicon-home&#34;&gt;&lt;/i&gt;&lt;/span&gt; &lt;input class=&#34;form-control {$borderColor}&#34; id=&#34;userPw2&#34; type=&#34;password&#34; placeholder=&#34;Confirm password&#34; name=&#34;confirmPassword&#34; data-match=&#34;#confirmPassword&#34; data-minLength=&#34;5&#34; data-match-error=&#34;some error 2&#34; required/&gt; &lt;span class=&#34;glyphicon form-control-feedback&#34;&gt;&lt;/span&gt; &lt;span class=&#34;help-block with-errors&#34;&gt;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Button --&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;label class=&#34;col-md-4 control-label&#34;&gt;&lt;/label&gt; &lt;div class=&#34;col-md-4&#34;&gt; &lt;button type=&#34;submit&#34; class=&#34;btn btn-warning&#34; &gt;Send &lt;span class=&#34;glyphicon glyphicon-send&#34;&gt;&lt;/span&gt;&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;/div&gt; &lt;div class=&#34;col-lg-3&#34;&gt; &lt;script async src=&#34;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&#34;&gt;&lt;/script&gt; &lt;!-- responsive hotel --&gt; &lt;ins class=&#34;adsbygoogle&#34; style=&#34;display:block&#34; data-ad-client=&#34;ca-pub-0173509626327009&#34; data-ad-slot=&#34;7944464098&#34; data-ad-format=&#34;auto&#34;&gt;&lt;/ins&gt; &lt;script&gt; (adsbygoogle = window.adsbygoogle || []).push({}); &lt;/script&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;row&#34; align=&#34;left&#34;&gt; &lt;script async src=&#34;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&#34;&gt;&lt;/script&gt; &lt;!-- responsive hotel --&gt; &lt;ins class=&#34;adsbygoogle&#34; style=&#34;display:block&#34; data-ad-client=&#34;ca-pub-0173509626327009&#34; data-ad-slot=&#34;7944464098&#34; data-ad-format=&#34;auto&#34;&gt;&lt;/ins&gt; &lt;script&gt; (adsbygoogle = window.adsbygoogle || []).push({}); &lt;/script&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- /.container --&gt; &lt;script src=&#39;http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js&#39;&gt;&lt;/script&gt; &lt;script src=&#39;http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js&#39;&gt;&lt;/script&gt; &lt;script src=&#39;http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js&#39;&gt;&lt;/script&gt; &lt;script src=&#34;js/index.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(document).ready(function() { $(&#39;#reg_form&#39;).bootstrapValidator({ // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later feedbackIcons: { valid: &#39;glyphicon glyphicon-ok&#39;, invalid: &#39;glyphicon glyphicon-remove&#39;, validating: &#39;glyphicon glyphicon-refresh&#39; }, fields: { first_name: { validators: { stringLength: { min: 2, }, notEmpty: { message: &#39;Please supply your first name&#39; } } }, last_name: { validators: { stringLength: { min: 2, }, notEmpty: { message: &#39;Please supply your last name&#39; } } }, phone: { validators: { notEmpty: { message: &#39;Please supply your phone number&#39; }, phone: { country: &#39;US&#39;, message: &#39;Please supply a vaild phone number with area code&#39; } } }, address: { validators: { stringLength: { min: 8, }, notEmpty: { message: &#39;Please supply your street address&#39; } } }, city: { validators: { stringLength: { min: 4, }, notEmpty: { message: &#39;Please supply your city&#39; } } }, state: { validators: { notEmpty: { message: &#39;Please select your state&#39; } } }, zip: { validators: { notEmpty: { message: &#39;Please supply your zip code&#39; }, zipCode: { country: &#39;US&#39;, message: &#39;Please supply a vaild zip code&#39; } } }, comment: { validators: { stringLength: { min: 10, max: 200, message:&#39;Please enter at least 10 characters and no more than 200&#39; }, notEmpty: { message: &#39;Please supply a description about yourself&#39; } } }, email: { validators: { notEmpty: { message: &#39;Please supply your email address&#39; }, emailAddress: { message: &#39;Please supply a valid email address&#39; } } }, password: { validators: { identical: { field: &#39;confirmPassword&#39;, message: &#39;Confirm your password below - type same password please&#39; } } }, confirmPassword: { validators: { identical: { field: &#39;password&#39;, message: &#39;The password and its confirm are not the same&#39; } } }, } }) .on(&#39;success.form.bv&#39;, function(e) { $(&#39;#success_message&#39;).slideDown({ opacity: &#34;show&#34; }, &#34;slow&#34;) // Do something ... $(&#39;#reg_form&#39;).data(&#39;bootstrapValidator&#39;).resetForm(); // Prevent form submission e.preventDefault(); // Get the form instance var $form = $(e.target); // Get the BootstrapValidator instance var bv = $form.data(&#39;bootstrapValidator&#39;); // Use Ajax to submit form data $.post($form.attr(&#39;action&#39;), $form.serialize(), function(result) { console.log(result); }, &#39;json&#39;); }); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </pre> <p>&nbsp;</p>http://www.aspforums.net/Threads/194703/Bootstrap-validation-for-Registration-Form-using-jQuery-BootstrapValidator-plugin-in-ASPNet-MVC/http://www.aspforums.net/Threads/194703/Bootstrap-validation-for-Registration-Form-using-jQuery-BootstrapValidator-plugin-in-ASPNet-MVC/Tue, 06 Dec 2016 21:22:41 GMT