Invalid form input highlighting

Question

I am working on creating a form with a set of fields, such as username, passwords, etc .... I want to do a check when the SUBMIT button is pressed.

I am trying to get a warning from my border color. All fields are valid, my border should change to green. If he has any errors, he should change to red.

Anyone have ideas regarding my problem

If anyone has any suggestions?

Answer 1

You can use the jquery plugin ... here you are. JQuery form validation custom example

Answer 2

Use jQuery validation plugin: http://docs.jquery.com/Plugins/Validation

In this plugin, you need to define validation rules for this field. You can also set error messages for this field for this validation rule.

This plugin adds classes to a valid and invalid field.

You must give css for this class.

For instance:

$(document).ready(function(){ $(".my_form").validate({ rules:{ // validation rules email_address: { required:true, email: true }, password:{ minlength: 6 }, confirm_password: { equalTo:"#password" } }, messages: { email_address: { required: "Please enter email address", email: "Please enter valid email address", }, /* likewise you can define messages for different field for different rule. */ } errorClass: "signup_error", /*This is error class that will be applied to invalid element. Use this class to style border. You can give any class name.*/ }); }); 

As soon as you press the submit button and the field is invalid, the plugin will add the class to the element that you specified as errorClass , and when you enter a valid value in the field, the plugin will delete this class and add 'valid' by default.

You can use these two classes to create a valid and invalid element with a simple element.

 .valid { border-color:"green" } .signup_error { border-color:"red" } 

Hope this solves your problem.

Answer 3

Js i'm the way. You can find some really good jQuery validators if you think of it.

To create a simple validator, I would go as follows

 <form class="validator"> <input type="text" name="my-input-1" data-validator="integer"/> <input type="text" name="my-input-2" data-validator="email"/> .... </form> <script> $("form.validator").submit(evt, function() { var errors = 0; $(this).find('[data-validator]').each(function(e, i) { var value = $(this).value; switch($(this).data('validator')) { case 'integer': if (!(parseFloat(value) == parseInt(value)) && !isNaN(value)) { $(this).css({'border-color': '#FF0000'}); errors++; } else $(this).css({'border-color': '#000000'}); break; case 'email': if (..... // regex validate email ...) { $(this).css({'border-color': '#FF0000'}); errors++; } else $(this).css({'border-color': '#000000'}); break; } }); if (errors > 0) { // If you want to prevent default event execution no matter what evt.preventDefault(); // If you want you other attached events to NOT run evt.stopPropagation(); // signal failure return false; } // All is well, go on return true; }); </script> 

Of course, it’s always useful to create functions for each validator, and it’s even better to wrap it all in a jQuery widget (I would suggest using jQuery Widget Factory), which will allow you to improve it in the future and keep you flexible in changes

Answer 4

Use the link

Use this for future reference outside the text box selection.

Answer 5

You can use the DOJO library to check form fields. It is easy to implement.

Below is a dojo implementation tutorial

http://dojotoolkit.org/documentation/tutorials/1.6/validation/

and this is a working example that you can see ...

http://dojotoolkit.org/documentation/tutorials/1.6/validation/demo/dijitcheck.html

Answer 6

I made a validation library for general JavaScript purposes only. It is even being tested! You can override whatever you want quite easily: https://github.com/parris/iz

As for highlighting invalid fields, you can simply change the style of that field or add a class. The example below only changes the background color of the input and adds a message.

Working example: http://jsfiddle.net/soparrissays/4BrNu/1/

 $(function() { var message = $("#message"), field = $("#field"); $("#the-form").submit(function(event) { if (iz(field.val()).alphaNumeric().not().email().valid){ message.text("Yay! AlphaNumeric and not an email address"); field.attr("style","background:green;"); } else { message.text("OH no :(, it must be alphanumeric and not an email address"); field.attr("style","background:red;"); } return false; }); });​ 

The validator is called iz. It just lets you combine the checks together, and it will tell you if everything went well, or if you check the “errors” object, it will give you more information. In addition, you can specify your own error messages. Check out the docs on github.

What happens here, we set the click handler for the submit event as soon as the page is ready. return false; at the bottom of the submit callback prevents the form from submitting. If you return true; , the form will continue. Instead of return false, you can also event.preventDefault(); but I prefer the return syntax for consistency. In the real world with several form elements, you can do something like this (psuedo code):

 var passed = true; if (check field 1 is false) ... if (check field 2 is false) ... if (check field n is false) passed = false style and add message if passed return true else return false 

The if statement checks the validation rules and makes changes to the DOM accordingly. Thus, you can provide a complete list of all passed and failed fields with a full description of what is wrong.

Answer 7

I have used this plugin in the past, makes the implementation very simple and has good documentation and examples.

Answer 8

My advice is using jQuery

try to create some inputs first and give them a class

HTML:

 <input type="text" class="validate" value="asdf" /> <input type="text" class="validate" value="1234" /> <input type="text" class="validate" value="asd123" /> <input type="text" class="validate" value="£#$&" /> <input type="text" class="validate" value=" " /> 

then use the code below to see how it works.

JQuery

 // Validate Function function validate(element) { var obj = $(element); if (obj.val().trim() != "") { // Not empty if (!/^[a-zA-Z0-9_ ]{1,10}$/.test(obj.val())) { // Invalid obj.css('border-color', '#FAC3C3'); if (!obj.next().hasClass('error')) { obj.after('<span class="error">Please use letters or numbers only and not more than 10 characters!</span>'); } else { obj.next().text('Please use letters or numbers only and not more than 10 characters!'); } } else { // Valid obj.css('border-color', 'lightgreen'); if (obj.next().hasClass('error')) { obj.next().remove(); } } } else { // Empty obj.css('border-color', '#FAC3C3'); if (obj.next().hasClass('error')) { obj.next().text('This field cannot be empty!'); } else { obj.after('<span class="error error-keyup-1">This field cannot be empty!</span>'); } } } $(document).ready(function() { // Each $('.validate').each(function() { // Validate validate(this); // Key up $(this).keyup(function() { // Validate validate(this); }); }); }); 

jsfiddle: http://jsfiddle.net/BerkerYuceer/nh2Ja/

Answer 9

Example server side validation of your need. You may try.

 <?php error_reporting(0); $green = "border: 3px solid green"; $red="border: 3px solid red"; $nothing=""; $color = array ("text1"=>$nothing , "text2"=>$nothing) ; if ( $_POST['submit'] ) { if($_POST['text1']) { $color['text1'] = $green; } else $color['text1'] = $red; if($_POST['text2'] ) { $color['text2'] = $green; } else $color['text2'] = $red; } ?> <form method="post"> <input type="text" name="text1" style="<?php echo $color ['text1']?>" value="<?php echo $_POST['text1']?>"> <input type="text" name="text2" style="<?php echo $color ['text2']?>" value="<?php echo $_POST['text2']?>"> <input type="submit" name="submit"> </form> 

---

Note

• Always misinform user input.
• error_reporting off is not a good practice. I did this since this is not production environment code.
• Check before trying to access the post array using isset or something similar like this.
• Always check if a variable exists before use.

Answer 10

 $("#btn").click(function(){ // Check all of them if( $.trim($("#file").val()) == ""){ $("#file").css("border","1px solid #ff5555"); }else{ $("#file").css("border","1px solid #cccccc"); if( $.trim($("#showboxResimBaslik").val()) == ""){ $("#showboxResimBaslik").css("border","1px solid #ff5555"); }else{ $("#showboxResimBaslik").css("border","1px solid #cccccc"); if( $.trim($("#showboxResimEtiket").val()) == ""){ $("#showboxResimEtiket").css("border","1px solid #ff5555"); }else{ if($.trim($("#showboxResimSehir").val()) == ""){ $("#showboxResimSehir").css("border","1px solid #ff5555"); }else{ $("#showboxResimSehir").css("border","1px solid #cccccc"); $("#resimYukleForm").removeAttr("onSubmit"); $('#resimYukleForm').bind('submit', form_submit); } } } } }); 

Answer 11

Probably the easiest way is to use this javascript: http://livevalidation.com/examples#exampleComposite

I think this fits your description best.

Answer 12

check the link below, here I checked only the empty fields and, if the fields are empty, changed the input field, which will change the border color of the input field. http://jsfiddle.net/techprasad/jBG7L/2/

I used

 $("#myb").click(function(){ 

which is on the button click event, but you can use the send event.

Answer 13

Here's what I would say - this is a short, precise and concise way to do this in jQuery.

HTML:

 <form id="myform" name="form" action="http://www.google.com"> <div class="line"><label>Your Username</label><input class="req" type="text" /></div> <div class="line"><label>Your Password</label><input class="req" type="password" /></div> <div class="line"><label>Your Website</label><input class="req" type="text" /></div> <div class="line"><label>Your Message</label><textarea class="req"></textarea></div> <div class="line"><input type="submit" id="sub"></submit> </form> 

CSS

 .line{padding-top:10px;} .inline input{padding-left: 20px;} label{float:left;width:120px;} 

JQuery

 $(function() { function validateform() { var valid = true; $(".req").css("border","1px solid green"); $(".req").each(function() { if($(this).val() == "" || $(this).val().replace(/\s/g, '').length == 0) { $(this).css("border","1px solid red"); valid = false; } }); return valid; } $("#sub").click(function() { $('#myform').submit(validateform); $('#myform').submit(); }); }); 

Live demo

Answer 14

Good hello, you can use html5 "required" and "pattern" in your form fields. You will get a red border if it's wrong, and a green one if it's right. You can even create: valid and: invalid fields if the colors do not fit your needs. I have never tested it, but why not, it's better than nothing;)

html5 solution

Answer 15

Firs Learn javascript, if you have basic knowledge of js and need to know the logic, keep reading. First you need an event handler to run the function in the form of submit The easiest way is (although there are more efficient ways)

 <form action="som.php" onsubmit="functionName()"> 

here

 </form> 

This will call a function called functionname. In the function, the name of the function for accessing input fields and checking with regular expressions

 function functionName() { //verification code if(verified) { //code to change border to green } } 

You need to get input fields and check them. If you do not know how to do this, get some Javascript books. If you need to check as soon as the value is entered, use the onchange on event in the input fields