jQuery validate plugin: hide error message and show focussed elements

Question

I am using jQuery validate plugin for client side validation on my registration form. I want to hide the error message "Please enter your firstname" and show the required field in red box instead.

Following is my code:

<script>
    $("#register-form").validate({
        errorPlacement: function(error, element) {
            return true;
        }
        rules: {
            firstname: "required",
            lastname: "required"
        },
        messages: {
            firstname: "Please enter your firstname",
            lastname: "Please enter your lastname"
        }
    }); 
</script>

Here, I have used "errorPlacement" option to hide the error messages but it does hides the message but doesn't focus my required field and also the form is reloaded.

I want all required fields to be focused in red box instead of error messages

Answer 1

$("#register-form").validate({
    errorPlacement: function (error, element) {
        return false;
    },
    rules: {
        firstname: "required",
        lastname: "required"
    },
    messages: {
        firstname: "Please enter your firstname",
        lastname: "Please enter your lastname"
    }
});

.error {
    border: 1px solid red !important;
}
.error:focus {
    border: 1px solid red !important;
}
.valid {
    border: 1px solid green !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<form role="form" id="register-form">
    <div class="form-group">
        <label for="firstname">FirstName:</label>
        <input type="text" class="form-control" name="firstname" id="firstname">
    </div>
    <div class="form-group">
        <label for="lastname">LastName:</label>
        <input type="text" class="form-control" name="lastname" id="lastname">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Answer 2

1-To hide error messages errorPlacement callback function set to return false; not return true;

errorPlacement: function(error, element) {
    return false;
}, //<---missing comma here

2-missing comma after errorPlacement: function causing the form submit and not validating the inputs

3- Validation plugin has default classes error and valid, modify them as below to highlight the input fields as red, just add border: 1px solid red property to error selector

.error {
    border: 1px solid red;
}
.error:focus {
    border: 1px solid red;
}
.valid {
    border: 1px solid green;
}

$("#register-form").validate({
    errorPlacement: function (error, element) {
        return false;
    },
    rules: {
        firstname: "required",
        lastname: "required"
    },
    messages: {
        firstname: "Please enter your firstname",
        lastname: "Please enter your lastname"
    }
});

.error {
    border: 1px solid red !important;
}
.error:focus {
    border: 1px solid red !important;
}
.valid {
    border: 1px solid green !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<form role="form" id="register-form">
    <div class="form-group">
        <label for="firstname">FirstName:</label>
        <input type="text" class="form-control" name="firstname" id="firstname">
    </div>
    <div class="form-group">
        <label for="lastname">LastName:</label>
        <input type="text" class="form-control" name="lastname" id="lastname">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Fiddle