Some custom validation stuff done in jQuery Mobile to enable control highlighting when validation fails. Without this jQMobile puts the css around the actual control instead of it's own wrapper that adds style to the control. The net effect is the border is applied to the rounded controls.

CustomValidationStyle.css

.input-validation-error {
    border: 2px solid #a40025 !important;
}

CustomValidators.js

(function () {
  
  //init the validator script with overriden defaults
  $.validator.setDefaults({
    onkeyup: false,
      //this is the actual function, stolen and modified to alter the parent class on the control instead of the actual
      highlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
          this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
          $(element).parent().addClass(errorClass).removeClass(validClass);
        }
      },
      unhighlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
          this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
          $(element).parent().removeClass(errorClass).addClass(validClass);
        }
      }
  });

  //add all of the custom rules here...

  //example of a custom rule
  $.validator.addMethod("fullnamelength", function (value, element, params) {
    //not checking required here, if no name move on
    if (value == undefined || value == "")
    { return true; }

    //checking boundary
    if (value.length < 2 || value.length > 30)
    { return false; }

    return true;
  });

  $.validator.unobtrusive.adapters.addBool("fullnamelength");

})();