Note that there are some explanatory texts on larger screens.

plurals
  1. POsimple validation on form
    text
    copied!<p> I have to made simple validation form using jquery, ( <strong>no 3rd party plugins</strong>) for this i wrote following code..</p> <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /&gt; &lt;style&gt; .InvaildField { border: 0.5px solid red; } &lt;/style&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function () { $('#btnSubmit').attr("disabled", true); $('.emptyField').blur(function () { if ($(this).val() == '') { $(this).removeAttr('class'); $(this).addClass('InvaildField'); $('#btnSubmit').attr("disabled", true); } else { $(this).removeAttr('class'); $('#btnSubmit').attr("disabled", false); } }); $('.emptyField').keyup(function () { if ($(this).val() == '') { $(this).removeAttr('class'); $(this).addClass('InvaildField'); $('#btnSubmit').attr("disabled", true); } else { $(this).removeAttr('class'); $('#btnSubmit').attr("disabled", false); } }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt;Name&lt;/td&gt; &lt;td&gt;&lt;input class="emptyField" type="text"/&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Email&lt;/td&gt; &lt;td&gt;&lt;input class="emptyField" type="text"/&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Mobile Number&lt;/td&gt; &lt;td&gt;&lt;input class="emptyField" type="text"/&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2"&gt; &lt;input id="btnSubmit" class="emptyField" type="button" value="Submit"/&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>but <strong>problem is when i fill first text box , button is enable</strong>, how to enable button when all texboxes are not null , </p> <p><a href="http://jsfiddle.net/xA7hH/" rel="nofollow">http://jsfiddle.net/xA7hH/</a></p>
 

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