Mastering jQuery and Modern Form Validation

1. Modern Validation APIs (Constraint Validation API)

For advanced tracking and custom error messaging, JavaScript provides the Constraint Validation API. This API gives you deep programmatic control over HTML5 validation states.

Key Properties & Methods

• element.validity: An object containing boolean properties describing the validity state of the input.
  • validity.valueMissing: True if required but empty.
  • validity.typeMismatch: True if the syntax doesn't match the type (e.g., an invalid email).
  • validity.tooShort: True if it doesn't meet minlength.
  • validity.valid: True if the element passes all validation checks.
• element.setCustomValidity(string): Sets a custom error message. If you pass an empty string "", the field becomes valid again.
• element.checkValidity(): Returns true or false, and fires an invalid event if the element is invalid.

Real-World Example using the Validation API

Here is how you can use JavaScript to intercept validation and apply custom logic:

const passwordInput = document.getElementById('password');

passwordInput.addEventListener('input', () => {
  // Custom validation logic
  if (passwordInput.value.toLowerCase().includes('password')) {
    // Set a custom error message, blocking form submission
    passwordInput.setCustomValidity("Your password cannot contain the word 'password'!");
  } else {
    // Clear the error to make the input valid again
    passwordInput.setCustomValidity("");
  }
  
  // Force the browser to report the validation state visually
  passwordInput.reportValidity();
});

2. Additional Features in Forms

As web apps grow, you will likely encounter these advanced form handling paradigms:

• Asynchronous (AJAX) Submissions: Instead of standard form routing, developers use fetch() or libraries like Axios to send FormData to a server in the background, updating the UI dynamically without a page reload.
• Debouncing Input Validation: For heavy validation tasks (like checking a database via API to see if a username is taken), developers wrap input listeners in a debounce function so the API isn't spammed with requests on every single keystroke.

3. Introduction to jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It simplifies HTML document traversal, manipulation, event handling, animation, and AJAX with an easy-to-use API that works across a multitude of browsers.

Core Syntax

Before diving into the code, include jQuery in your project via a CDN link or by downloading the file. The basic syntax is designed to select HTML elements and perform an action on them:

The Core Syntax: $(selector).action()

• The $ sign defines or accesses jQuery.
• The (selector) "finds" or queries HTML elements.
• The .action() is the jQuery method to be performed on the element(s).

The Document Ready Event

To prevent any jQuery code from running before the document is fully loaded, code is typically wrapped in a "document ready" function:

$(document).ready(function(){
   // jQuery methods go here...
});

// Shorter equivalent version:
$(function(){
   // jQuery methods go here...
});

4. jQuery Selectors

Selectors allow you to select and manipulate HTML elements based on their name, ID, classes, types, attributes, and more. They are borrowed from CSS syntax.

5. jQuery Events

Events are actions that happen on a web page, such as clicking a button or submitting a form. jQuery makes it simple to attach event handlers:

• Mouse Events: click(), dblclick(), mouseenter(), mouseleave()
• Keyboard Events: keypress(), keydown(), keyup()
• Form Events: submit(), change(), focus(), blur()
• Document Events: load(), resize(), scroll(), unload()

Example:

$("p").click(function(){
  $(this).hide(); // Hides the paragraph when clicked
});

6. jQuery Effects

jQuery includes built-in effects to add animations to your website:

• Hiding/Showing: hide(), show(), and toggle().
• Fading: fadeIn(), fadeOut(), fadeToggle(), and fadeTo().
• Sliding: slideDown(), slideUp(), and slideToggle().
• Custom Animation: The animate() method lets you create custom animations using CSS properties.

$("#fade-btn").click(function(){
  $("#box").fadeIn("slow");
});

7. jQuery DOM Manipulation

jQuery contains powerful methods for changing HTML elements and attributes.

Get/Set Content

• text() - Sets or returns the text content of selected elements.
• html() - Sets or returns the content of selected elements (including HTML markup).
• val() - Sets or returns the value of form fields.

Add/Remove Elements

• append() / prepend() - Inserts content at the end or beginning of the selected elements.
• after() / before() - Inserts content after or before the selected elements.
• remove() / empty() - Removes the selected element entirely, or removes its child elements.

8. jQuery Traversing

Traversing allows us to locate HTML elements based on their relation to other elements, treating the document as a family tree.

• Ancestors: parent(), parents(), parentsUntil()
• Descendants: children(), find()
• Siblings: siblings(), next(), prev()

9. jQuery AJAX

AJAX allows for exchanging data with a server and updating parts of a web page without reloading the entire page.

• $.get(): Requests data from the server with an HTTP GET request.
• $.post(): Submits data to the server using an HTTP POST request.
• $("selector").load(): Loads data from a server and puts the returned HTML directly into the selected element.

// Simple load example
$("#div1").load("demo_test.txt");

10. jQuery Utility Methods

• noConflict(): Releases the hold on the $ shortcut so other JavaScript frameworks can use it.
• Utility Methods: Methods like $.each() used for seamlessly looping through arrays or objects.