Using addClass for jQuery validation

Question

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>

What seems to go wrong with your attempt? Any error messages? — showdev
– showdev, Commented Oct 30, 2017 at 17:12
No there is no error message appearing and the form is appearing when I click on the search button — Smith
– Smith, Commented Oct 30, 2017 at 17:13
I don't see any code that would hide or show the form. Can you include the rest of your code (JS, CSS) to help demonstrate the problem? — showdev
– showdev, Commented Oct 30, 2017 at 17:14
That isn’t an issue though. I use the hide and toggle functions to hide and show the form when the search button is clicked. The validation is nothing to do with that — Smith
– Smith, Commented Oct 30, 2017 at 17:18

Hakan Kose · Accepted Answer · 2017-10-30 18:20:01Z

1

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>

edited Oct 30, 2017 at 18:20

answered Oct 30, 2017 at 17:56

Hakan Kose

1,6569 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Smith Over a year ago

I can't use this because I need addClass and removeClass as it is part of my assignment. Thank you though

Hakan Kose Over a year ago

@Smith, i edited for you with adding the addClass and removeClass

jvk · Accepted Answer · 2017-10-30 17:36:17Z

0

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>

answered Oct 30, 2017 at 17:36

jvk

2,1893 gold badges22 silver badges28 bronze badges

3 Comments

Smith Over a year ago

The code here shows the reference number at all times and you are still able to click search and the form appears

jvk Over a year ago

@Smith,you mean after entry form should hide

Smith Over a year ago

Yes, if a field is left blank then the validation message will appear but the form will not appear. Could you just disable the search button until there is a valid reference number entered

Mosh Feu · Accepted Answer · 2017-10-30 18:25:32Z

0

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>

edited Oct 30, 2017 at 18:25

answered Oct 30, 2017 at 17:17

Mosh Feu

29.5k18 gold badges94 silver badges141 bronze badges

5 Comments

Smith Over a year ago

This is for an assignment and I need to include add and remove class though

Mosh Feu Over a year ago

I'm not sure I understand. The toggleClass is equivalent to addClass and removeClass..

Mosh Feu Over a year ago

When you click on the search button when the field is empty, don't you see the validation message?

Mosh Feu Over a year ago

Let us continue this discussion in chat.

Mosh Feu Over a year ago

I updated my answer. If I understand, you want that the message will be displayed (because the input is empty), right?

Collectives™ on Stack Overflow

Using addClass for jQuery validation

3 Answers 3

2 Comments

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related