Geek Answers Handbook

Jquery validation plugin-change border color + no text

In any case, can I change the border color to red to an error and get rid of the text? This is pretty much the only error I want to display, and it will disappear after input / textarea becomes focused.

<div id="contact-form"> <form method="get" id="contacts"> <div class="contact-controls"> <label class="contact-label" for="name-input">NAME</label> <div class="input-wrapper"> <input type="text" name="contact-name" id="name-input" placeholder="Your Name" required> </div> </div> <div class="contact-controls"> <label class="contact-label" for="email-input">EMAIL</label> <div class="input-wrapper"> <input type="text" name="contact-email" id="email-input" placeholder="Your Email" required> </div> </div> <div class="contact-controls"> <label class="contact-label" for="message-input">MESSAGE</label> <div class="input-wrapper"> <textarea name="contact-message" id="message-input" rows="15" placeholder="Hi there&#33;" required></textarea> </div> </div> <div class="contact-controls"> <input type="hidden" name="save" value="contact"> <button type="submit" class="contact-button">Send</button> </div> </form> </div>
+6
source share
3 answers

Follow these steps:

1) Set the errorPlacement callback function to return false to suppress the error message text.

2) Change the CSS for the .error and .valid class plugin to show colored borders or something else around the element. By default, the plugin is already automatically applied and removes these two class , so there are no special plugin parameters for this.

Working DEMO: http://jsfiddle.net/8vQFd/

JQuery

 $(document).ready(function () { $('#myform').validate({ // initialize the plugin // your rules and options, errorPlacement: function(){ return false; // suppresses error message text } }); });
+15
source

No Jquery No Add Another / Change Any Functionality Just Add Css

 input[class="error"]{border:1px solid #f00 !important;} input[class="form control error"]{border:1px solid #f00 !important;} .error p{color:#f00 !important;}
0
source

You can add a class to your input / text fields that would add a red border

I called it .error

 input:focus,textarea:focus{ outline: none !important; } input.error, textarea.error{ outline:red groove thin; }

Then use jquery to navigate and find the input / text fields with class ".error" and empty set it to empty.

 $(document).ready(function() { $('#contact-form').find('.error').val(' '); });

Jsfiddle v1

Update

JS example

  $(document).ready(function() { $('#contact-form').find('.error').val(' '); $('input, textarea').click(function() { $(this).removeClass('error').val(''); }); var name = $('#name-input').val(); if(name == ''){ $('#name-input').addClass('error'); } });

CSS

  input:focus,textarea:focus{ border-color: initial; } input.error, textarea.error{ border:1px solid red; }

HTML

 <div id="contact-form"> <form method="get" id="contacts"> <div class="contact-controls"> <label class="contact-label" for="name-input">NAME</label> <div class="input-wrapper"> <input type="text" name="contact-name" id="name-input" placeholder="Your Name" value="" class="" required> </div> </div> <div class="contact-controls"> <label class="contact-label" for="email-input">EMAIL</label> <div class="input-wrapper"> <input type="email" name="contact-email" id="email-input" placeholder="Your Email" value="" class="" required> </div> </div> <div class="contact-controls"> <label class="contact-label" for="message-input">MESSAGE</label> <div class="input-wrapper"> <textarea name="contact-message" id="message-input" rows="15" placeholder="Hi there&#33;" class="" required></textarea> </div> </div> <div class="contact-controls"> <input type="hidden" name="save" value="contact"> <button type="submit" class="contact-button">Send</button> </div> </form> </div>

JSfiddle V2

-1
source

More articles:


All Articles