JQuery > Validation > If textbox empty is fine > If user gives an input, validate with regex

Question

I have a weird scenario. I have a form with Current Password, New Password and Confirm New Password field.

• Current Password is required.
• New Password is not required unless the user wants to change it, in that case must meet the regex requirements (^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$&*\"]).{6,16}?$).
• Confirm New Password not required but it matches with New Password.

Following is the MVC cshtml hookup.

     <li>
       <label for="Password" class="required">Current Password</label>
          @Html.TextBoxFor(m => m.UserInfoData.Password, new
             {
                 @type = "password",
                 @class = "k-textbox",
                 @placeholder = "Current Password",
                 @validationmessage = "Current Password Required!",
                 @required = "required"
              })
      </li>
      <li>
         <label for="NewPassword" class="required">New Password</label>
            @Html.TextBoxFor(m => m.UserInfoData.NewPassword, new
               {
                  @type = "password",
                  @class = "k-textbox",
                  @placeholder = "New Password",
                  @required = "required",
                  @pattern = "^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$&*\"]).{6,16}?$",                                        
               })
     </li>
     <li>
         <label for="ConfirmNewPassword" class="required">Confirm New Password</label>
            @Html.TextBoxFor(m => m.UserInfoData.ConfirmNewPassword, new
               {
                  @type = "password",
                  @class = "k-textbox",
                  @placeholder = "Confirm New Password",
                  @verifypasswords = string.Empty
                })
   </li>

   <li class="confirm">
      <button class="k-button k-primary" type="submit" id="submitSetingsData">Update Details</button>
   </li>

The following are my jQuery hookup with kendo validation.

$("#settings").kendoValidator({
        rules: {                
            verifyPasswords: function (input) {
                var result = true;
                if (input.is("[name=UserInfoData.ConfirmNewPassword]")) {
                    result = input.val() === $("#UserInfoData_NewPassword").val();
                }
                return result;
            }
        },
        messages: {                
            verifyPasswords: "New passwords do not match!"
        }
    });

Validations are working fine but I can't make the New Password field optional. HTML5 pattern requires the required but I want to make this field optional, if user leaves it blank I wouldn't check for validation but if user gives any input it must comply with regex. I've used ? at the end of regex but its not making it optional. Any possible solution or a hint on kendo validation or html5 will be very appreciated. Thank you.

Answer 1

Perhaps adding an "or is empty" to the regex:

^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$&*\"]).{6,16}?$|^$

the | means OR and ^$ bit validates against empty strings. Tried it in a regex validator and it returned positive when I either left the string empty or used a pattern compatible with the regex you specified.