Note that there are some explanatory texts on larger screens.

plurals
  1. POText Input Validation
    text
    copied!<p><a href="http://jsfiddle.net/ZKsjr/" rel="nofollow">http://jsfiddle.net/ZKsjr/</a> 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? </p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt; &lt;title&gt; - jsFiddle demo&lt;/title&gt; &lt;script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'&gt;&lt;/script&gt; &lt;link rel="stylesheet" type="text/css" href="/css/result-light.css"&gt; &lt;script type='text/javascript'&gt;//&lt;![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", ""); }); });//]]&gt; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;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/&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload