jQuery Forms & Validation
Forms are the bridge between users and your application. With jQuery you can read/set values, react to form events, validate inputs (using HTML5 or custom rules), and submit via AJAX.
Quick Reference
| Topic / Method | Description | Example |
|---|---|---|
val(), prop() |
Get/set values and boolean properties. | $('#name').val('Sonu'), $('#agree').prop('checked',true) |
Events: input, change, blur, submit |
React to typing, commit, losing focus, and form submit. | $('#f').on('submit', fn) |
| HTML5 validation | Use required, type="email", min/max, etc. |
form.checkValidity(), input:invalid CSS |
| Custom validation | Show errors, block submit with preventDefault(). |
if(!ok) e.preventDefault() |
| Live feedback | Debounce input and show status text. |
Set a small timeout (200–300ms) |
| Checkboxes & Radios | Read multiple checked values and selected radio. | $('.hobby:checked').map(...).get() |
| Dependent selects | Populate child dropdown based on parent value. | $('#country').change(...) |
| AJAX submit | Submit without page reload using serialize(). |
$.post('/submit', $('#f').serialize()) |
1) Read & Set Values
Use val() for inputs and prop('checked') for booleans like checkboxes.
$('#name').val('Sonu');
$('#agree').prop('checked', true);
2) Form Events: input, change, blur, submit
input fires on every keystroke, change when value is committed, blur when leaving, and submit when form is submitted.
$('#email').on('input', function(){ ... });
$('#f').on('submit', function(e){ e.preventDefault(); ... });
3) HTML5 Validation (built-in)
Let the browser enforce basics like required fields, email format, and allowed ranges. Style with input:invalid and input:valid.
<input type="email" required>
if(!this.checkValidity()){ // block submit }
4) Custom jQuery Validation
Implement your own rules and messages. Use preventDefault() to stop invalid submissions.
function validate(){ /* return true/false */ }
$('#f').on('submit', function(e){ if(!validate()) e.preventDefault(); });
5) Live Feedback (debounce)
Give instant hints while typing — debounce to avoid jittery UI.
$('#user').on('input', function(){ // debounce then update });
6) Password Toggle & Strength
Toggle visibility with attr('type') and show a basic strength hint.
$('#show').change(function(){ $('#pwd').attr('type', this.checked ? 'text' : 'password'); });
7) Checkbox & Radio
Use :checked to read checked options; map to an array for multi-select values.
var vals = $('.hobby:checked').map(function(){ return this.value; }).get();
8) Dependent Selects
Populate a child select based on parent selection (e.g., Country → State).
$('#country').change(function(){ // fill #state });
9) AJAX Submit (no reload)
Encode form with serialize() then post via AJAX, handle success/failure.
$('#f').on('submit', function(e){
e.preventDefault();
$.post('/submit', $(this).serialize());
});