CODEWITHSUNDEEP
javascriptjqueryfocusblurcheckvalidity
espresso_coffee
espresso_coffee

Reputation: 6110

Why checkValidty() returns false?

I have focus/blur function that disables submit button on focus then on blur checks if value is different than original value(I keep original value in data attribute for existing records) and checks if is valid. However I noticed one situation where my code breaks. For example in my example if you enter 07AB code function will return false and you will see the message Code already exist.. Then if I enter 07ab (just entered code value with lower case a and b) then function won't be triggered and user is able to submit the form. I did use console.log() to check if statement inside of the blur function and appears that checkValidty() returns true for 07AB but returns false for 07ab. Here is code example:

var codes = ["07AB","110A","117B","0316"]
$(".check-value").focus(function() {
  var submitBtn = $(this).closest("form").find(":submit").prop("disabled", true); //Disable submit button on field focus.
}).blur(function() {
  var fldObj = $(this),
    frmMessage = $(this).closest("form").find(".message-submit"),
    submitBtn = $(this).closest("form").find(":submit");

  if (String(fldObj.val()) !== String(fldObj.data("current")) && fldObj.get(0).checkValidity()) {
  	console.log("Check value.");
    if ($.inArray(fldObj.val(), codes) === -1) {
      fldObj.get(0).setCustomValidity("");
    } else {
      fldObj.get(0).setCustomValidity("Code already exists!");
    }
    submitBtn.prop("disabled", false);
  } else {
    fldObj.get(0).setCustomValidity("");
    submitBtn.prop("disabled", false);
  }
});
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave">
  <div class="form-group required">
    <label class="control-label" for="code"><span class="label label-primary">Code:</span></label>
    <input type="text" class="form-control check-value" name="frm_code" id="frm_code" data-current="" data-fldname="code" maxlength="4" pattern="[a-zA-Z0-9]{1,4}$" title="Code field allows alphanumeric characters only (must be four characters length) - no other special characters"
      placeholder="Example: 07AB" required>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div id="frm_message" class="alert message-submit"></div>
    </div>
  </div>
</form>

Upvotes: 0

Views: 299

Answers (1)

ControlAltDel
ControlAltDel

Reputation: 35106

Lowercase and Uppercase letters are different characters with different ascii / utf / latin / etc numerical associations. To solve your problem, either use a regular expression to check equality, or use .toLowerCase or .toUpperCase on your input.

if ($.inArray(fldObj.val().toUpperCase(), codes) === -1) { //added toUpperCase()
  fldObj.get(0).setCustomValidity("");
} else {
  fldObj.get(0).setCustomValidity("Code already exists!");
}

Upvotes: 0

Related Questions