By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,963 Members | 924 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,963 IT Pros & Developers. It's quick & easy.

Validating an Optional field with Bootstrap Jquey

P: 30
Hi:

My form asks the user the following question:

If you have a "Discount Code" enter it below.

Most people will not have a code so the field cannot be required, but when it is filled, I want the jquery validation to guard me against malicious code.

The form works great. The field is checking for "alpha numeric values" and "minimum characters" but I cannot submit it unless the field is filled out.

I want the form to validate if and when the field is filled out only.

THIS IS THE HTML:

Expand|Select|Wrap|Line Numbers
  1. <div class="form-group">
  2. <div class="form-group">
  3.     <label class="col-sm-3 control-label">Enter Code<span class="asterisk">*</span></label>
  4.     <div class="col-sm-7">
  5.     <input type="text" name="Discount_Code" class="form-control popovers"  placeholder="Enter Code">
  6.     </div>
  7. </div><!-- /.form-group -->
  8.  
THIS IS THE javascript: (jquery)

Expand|Select|Wrap|Line Numbers
  1.  
  2.    <script type="text/javascript">
  3.  
  4.  
  5.  
  6. var BlankonFormValidation = function () {
  7.  
  8.     return {
  9.  
  10.         // ====================
  11.         // CONSTRUCTOR APP
  12.         // ====================
  13.         init: function () {
  14.             BlankonFormValidation.jqueryValidation();
  15.         },
  16.  
  17.         // ====================
  18.         // JQUERY VALIDATION
  19.         // ====================
  20.         jqueryValidation: function () {
  21.  
  22.  
  23.             // START TEXTATERA VALIDATION //
  24.  
  25.  
  26.             if($('#sample-validation-2').length){
  27.  
  28.               $('#sample-validation-2').validate({
  29.                     rules:{
  30.  
  31.                             Discount_Code:{
  32.                             nosplchars:true,
  33.                             minlength: 5
  34.                             }
  35.                     },
  36.                     messages: {
  37.  
  38.                         Discount_Code: {
  39.         nosplchars: "no special characters",
  40.         minlength: jQuery.validator.format("Enter at least {0} characters")
  41.         }
  42.                     },
  43.                     highlight:function(element) {
  44.                         $(element).parents('.form-group').addClass('has-error has-feedback');
  45.                     },
  46.                     unhighlight: function(element) {
  47.                         $(element).parents('.form-group').removeClass('has-error');
  48.                     }
  49.  
  50.                 });
  51.             }
  52.  
  53.  
  54.  
  55.  
  56.             // START SPECIAL CHARS REGEX
  57.  
  58.     $.validator.addMethod("nosplchars", function(value, element) {          
  59.                 return /^[a-zA-z0-9\s]+$/.test(value);
  60.             }, "Special characters are not allowed");
  61.  
  62.               // END SPECIAL CHARS REGEX    
  63.  
  64.  
  65.  
  66.         }
  67.  
  68.     };
  69.  
  70. }();
  71.  
  72. // END TEXTATERA VALIDATION //
  73.  
  74. // Call main app init
  75. BlankonFormValidation.init();
  76.  
  77.  
  78.  
  79.     </script>
  80.  
Thanx beforehand
VirtualWeb
Attached Files
File Type: txt Dicount_Code_Form.txt (2.6 KB, 166 views)
Jun 8 '16 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.