CODEWITHSUNDEEP
jqueryhtmlvalidation
Smith
Smith

Reputation: 89

Using addClass for jQuery validation

I want to add an error message when the user leaves the reference field blank. When a user enters a valid reference number a form will appear. However I want my validation to stop the form appearing and an error message appear instead when the field is left blank.

$(document).ready(function() {
  $("#search").on('click', function() {
    if ($('#ref').val() == '') {
      $('label[for="ref"]').addClass("errorMsg");
    } else {
      $('label[for="ref"]').removeClass("errorMsg");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reference">
  <label for="ref">Booking Reference</label>
  <br>
  <input type="text" id="ref" name="Booking Reference Number" class="required" placeholder="12"> <span class="errorMsg">Reference number required</span>
  <button type="button" id="search">Search</button>
</form>
<form>
  <!--form appears when users click search-->
</form>

Upvotes: 0

Views: 906

Answers (3)

Mosh Feu
Mosh Feu

Reputation: 29249

If I understand you correctly, you can use toggleClass to toggle a class based on condition (in this case, if the search term is not empty). In that way, you can also, toggle the visibility of the error message using toggle method. Also, I assumed that you want to toggle the class on the label to style it as error, so I went to this way:

$(document).ready(function() {
  $("#search").on('click', function() {
    var isValid = $('#ref').val() == '';
    $('label[for="ref"]').toggleClass('error', isValid);
    $('.errorMsg').toggle(isValid);
  });
});
.error {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reference">
  <label for="ref" class="error">Booking Reference</label>
  <br>
  <input type="text" id="ref" name="Booking Reference Number" class="required" placeholder="12"> <span class="errorMsg">Reference number required</span>
  <button type="button" id="search">Search</button>
</form>
<form>
  <!--form appears when users click search-->
</form>

Upvotes: 0

Hakan Kose
Hakan Kose

Reputation: 1656

So if i have you correct you want to hide and show message when the value isNot a number or empty.

So i have this made for you that checks if the value is a number (empty means is not a number )

var $errorMsg = $(".errorMsg"),
    $form = $("#form");
// This is the way how you fix it with click on "Search"
$("#search").on("click", function(e) {
        // Check if the value is a number
    var checkNumber = $.isNumeric($("#ref").val());

    // If it is a number show the form empty up the error message
    if (checkNumber) {
        $form.show()
        $('label[for="ref"]').removeClass("errorMsg");
        $errorMsg.empty()
    } else {
        // Which means is not a number so show the error
        $errorMsg.html("Reference number required")
        $('label[for="ref"]').addClass("errorMsg");
        $form.hide()
    }
})
#form {
    display: none;
}
.errorMsg {
    color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reference">
    <label for="ref">Booking Reference</label>
    <br>
    <input type="text" id="ref" name="Booking Reference Number" class="required" placeholder="12"> <span class="errorMsg"></span>
    <button type="button" id="search">Search</button>
</form>

<div id="form">
    This is my form...
</div>

Upvotes: 1

jvk
jvk

Reputation: 2201

You can also try this method by addclass or remove class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <title>Document</title>
    <style>
        .errorMsg{
            color: red;
        }
        .referError{
            color:red;
        }
    </style>
</head>
<body>
<form id="reference">
  <label for="ref">Booking Reference</label>
  <br>
  <input type="text" id="ref" name="Booking Reference Number" class="required" placeholder="12"> <span class="referError">Reference number required</span>
  <button type="button" id="search">Search</button>
</form>
<script>
    $(document).ready(function() {
    $('.referError').hide();
  $("#search").on('click', function() {

    if (($('#ref').val() == '') || ($('#ref').val().length <12)) {

      $('label[for="ref"]').addClass("errorMsg");
      $('.referError').show();
    } else {
        $('.referError').hide();
      $('label[for="ref"]').removeClass("errorMsg");
    }
  });
});
</script>   
</body>
</html>

Upvotes: 0

Related Questions