Text Input Validation

Question

http://jsfiddle.net/ZKsjr/ I am working with this script which is able to validate an input field with style correctly but I am trying to implement a new feature so that it resets to the original value name (first name) if incorrect information has been used (var reg = /^[a-z ,.'-]+$/i;) but this needs to happen after they've finished entering input (blur), would you know how to fix that?

<!DOCTYPE html>

<html>

<head>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>       
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">   

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
function isfname(text){
    var reg = /^[a-z ,.'-]+$/i;
    return reg.test(text);
}

$(".fname").keyup(function(e) {
    var $test = $(this);
    if (isfname($test.val())) {
        $test.css("border-color", "rgb(140, 202, 165)");
        $test.css("background-color", "rgb(140, 202, 165)");
        $test.css("color", "black");

    }else{
        $test.css("background-color", "rgb(198, 95, 88)");
        $test.css("border-color", "rgb(198, 95, 88)");
        $test.css("color", "black");
    }
}).blur(function(e) {
    $(this).css("background-color", ""); 
    $(this).css("border-color", ""); 
    $(this).css("color", "");


});




});//]]>  

</script>


</head>

<body>

  <input type="text"id="element_2_2"  class="fname" maxlength="255" size="8" " value="First Name" 
 onblur="if (this.value == '') {this.value = 'First Name';}"
 onfocus="if (this.value == 'First Name') {this.value = '';}" required/>


</body>

</html>

Yes, with PHP or some other server-side script. Javascript is not suitable for validation since it can be deactivated. Check the warning in this question — Francisco Presencia
– Francisco Presencia, Commented Jul 16, 2013 at 3:11
I won't be using javascript alone, the problem I am having is that the blur function sets the background and border color to it's default value which is great but it doesn't reset the default value if someone enters invalid data. — Sabba Babba
– Sabba Babba, Commented Jul 16, 2013 at 3:15
@Francisco Well, having client-side validation is useful as long as you back it up with server-side validation. :) — doppelgreener
– doppelgreener, Commented Jul 16, 2013 at 3:20

neo108 · Accepted Answer · 2013-07-16 03:12:42Z

0

Check the field value in .blur and set the value of the field to First Name.

Like this...

.blur(function(e) {
    $(this).css("background-color", ""); 
    $(this).css("border-color", ""); 
    $(this).css("color", "");
    if(!isfname($(this).val()))
       $(this).val('First Name');
});

updated jsFiddle Demo

edited Jul 16, 2013 at 3:12

answered Jul 16, 2013 at 2:53

neo108

5,2744 gold badges31 silver badges42 bronze badges

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

1 Comment

Sabba Babba Over a year ago

I am trying to do it after the user has clicked off the input field, what you're doing is reseting the value to first name while they are still typing.

Collectives™ on Stack Overflow

Text Input Validation

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related