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.

```js
$(document).ready(function() {
  $("#search").on('click', function() {
    if ($('#ref').val() == '') {
      $('label[for="ref"]').addClass("errorMsg");
    } else {
      $('label[for="ref"]').removeClass("errorMsg");
    }
  });
});
```

```html
<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>
```

Answer: 
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 )

```js
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()
    }
})
```

```css
#form {
    display: none;
}
.errorMsg {
    color: red;
}
```

```html
<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>
```
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>

```