You can do what you are trying to achieve through new HTML5 attributes (required and pattern) and CSS3, see fiddle below:
<li>
<label for="nic">NIC Number:</label>
<input id="nic" type="text" pattern = "^\d{10}$" required />
</li>
New HTML5 attributes allow you to add regex patterns that will apply to the corresponding input. Then using CSS3 to apply styles based on the :valid or :invalid responses for visual feedback for the user. Note: forms will not be submitted until all fields are valid.
Also, try to use an <ul>
in your <form>
markup as opposed to a <p>
to order your form elements.
1
solved My application jQuery not working