// Get single input valueconst name = _('#name').val();const email = _('#email').val();// Get all form values as objectconst formData = _('#myForm').serializeObject();// { name: 'John', email: 'john@example.com', age: '25' }// Get as URL-encoded stringconst queryString = _('#myForm').serialize();// "name=John&email=john@example.com&age=25"

// Set single value_('#name').val('John Doe');_('#email').val('john@example.com');// Set checkbox_('#newsletter').prop('checked', true);// Set radio button_('input[name="gender"][value="male"]').prop('checked', true);// Set select_('#country').val('US');

const result = _('#myForm').validate({    name: {        required: true,        minLength: 3,        maxLength: 50,        requiredMessage: 'Name is required',        minLengthMessage: 'Name must be at least 3 characters'    },    email: {        required: true,        email: true,        requiredMessage: 'Email is required',        emailMessage: 'Please enter a valid email'    },    age: {        required: true,        number: true,        min: 18,        max: 100,        numberMessage: 'Age must be a number',        minMessage: 'You must be at least 18 years old'    }});if (result.valid) {    console.log('Form is valid!');    // Submit form} else {    console.log('Errors:', result.errors);    // Display errors}

{    required: true,    requiredMessage: 'This field is required'}

{    email: true,    emailMessage: 'Please enter a valid email address'}

{    url: true,    urlMessage: 'Please enter a valid URL'}

{    number: true,    numberMessage: 'Please enter a valid number'}

{    integer: true,    integerMessage: 'Please enter a whole number'}

{    minLength: 8,    maxLength: 20,    minLengthMessage: 'Password must be at least 8 characters',    maxLengthMessage: 'Password must be at most 20 characters'}

{    min: 18,    max: 100,    minMessage: 'You must be at least 18',    maxMessage: 'You must be at most 100'}

{    pattern: /^[A-Za-z0-9]+$/,    patternMessage: 'Only letters and numbers allowed'}

{    phone: true,    phoneMessage: 'Please enter a valid phone number'}

{    creditCard: true,    creditCardMessage: 'Please enter a valid credit card number'}

{    date: true,    dateMessage: 'Please enter a valid date'}

{    match: '#password',    matchMessage: 'Passwords do not match'}

{    alpha: true,    alphaMessage: 'Only letters allowed'}

{    alphanumeric: true,    alphanumericMessage: 'Only letters and numbers allowed'}

{    custom: function(value) {        return value.includes('@company.com');    },    customMessage: 'Email must be from @company.com'}

_('#email').on('blur', function() {    const result = _('#myForm').validate({        email: {            required: true,            email: true        }    });        if (!result.valid && result.errors.email) {        _(this).addClass('error');        _('#email-error').text(result.errors.email[0]).show();    } else {        _(this).removeClass('error');        _('#email-error').hide();    }});

_('#password').on('input', _.debounce(function() {    const password = _(this).val();    const strength = calculatePasswordStrength(password);        _('#strength').text(strength.label)        .removeClass()        .addClass('strength-' + strength.level);}, 300));

_('#myForm input, #myForm select, #myForm textarea').on('blur', function() {    validateField(_(this).attr('name'));});function validateField(fieldName) {    const rules = getValidationRules();  // Your validation rules        const result = _('#myForm').validate({        [fieldName]: rules[fieldName]    });        const $field = _(`[name="${fieldName}"]`);    const $error = $field.next('.error-message');        if (!result.valid && result.errors[fieldName]) {        $field.addClass('is-invalid');        $error.text(result.errors[fieldName][0]).show();    } else {        $field.removeClass('is-invalid').addClass('is-valid');        $error.hide();    }}

// HTML<form id="registerForm">    <div class="form-group">        <label for="username">Username</label>        <input type="text" id="username" name="username" class="form-control">        <span class="error-message"></span>    </div>        <div class="form-group">        <label for="email">Email</label>        <input type="email" id="email" name="email" class="form-control">        <span class="error-message"></span>    </div>        <div class="form-group">        <label for="password">Password</label>        <input type="password" id="password" name="password" class="form-control">        <span class="error-message"></span>    </div>        <div class="form-group">        <label for="confirmPassword">Confirm Password</label>        <input type="password" id="confirmPassword" name="confirmPassword" class="form-control">        <span class="error-message"></span>    </div>        <button type="submit" class="btn btn-primary">Register</button></form>// JavaScriptconst validationRules = {    username: {        required: true,        minLength: 3,        maxLength: 20,        alphanumeric: true,        requiredMessage: 'Username is required',        minLengthMessage: 'Username must be at least 3 characters',        alphanumericMessage: 'Username can only contain letters and numbers'    },    email: {        required: true,        email: true,        requiredMessage: 'Email is required',        emailMessage: 'Please enter a valid email address'    },    password: {        required: true,        minLength: 8,        pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]/,        requiredMessage: 'Password is required',        minLengthMessage: 'Password must be at least 8 characters',        patternMessage: 'Password must contain uppercase, lowercase, number, and special character'    },    confirmPassword: {        required: true,        match: '#password',        requiredMessage: 'Please confirm your password',        matchMessage: 'Passwords do not match'    }};// Form submission_('#registerForm').on('submit', function(e) {    e.preventDefault();        const result = _(this).validate(validationRules);        if (result.valid) {        // Clear previous errors        _('.error-message').hide();        _('.form-control').removeClass('is-invalid is-valid');                // Submit form        const formData = _(this).serializeObject();                _('#registerForm button[type="submit"]')            .prop('disabled', true)            .text('Registering...');                _.post('/api/register', formData)            .then(response => {                _.notify('Registration successful!', 'success');                window.location.href = '/dashboard';            })            .catch(error => {                _.notify('Registration failed. Please try again.', 'error');            })            .finally(() => {                _('#registerForm button[type="submit"]')                    .prop('disabled', false)                    .text('Register');            });    } else {        // Display errors        Object.keys(result.errors).forEach(field => {            const $field = _(`[name="${field}"]`);            const $error = $field.next('.error-message');                        $field.addClass('is-invalid');            $error.text(result.errors[field][0]).show();        });                // Focus first error field        _('.is-invalid').first().focus();    }});// Real-time validation_('#registerForm input').on('blur', function() {    const fieldName = _(this).attr('name');        if (validationRules[fieldName]) {        const result = _('#registerForm').validate({            [fieldName]: validationRules[fieldName]        });                const $field = _(this);        const $error = $field.next('.error-message');                if (!result.valid && result.errors[fieldName]) {            $field.addClass('is-invalid').removeClass('is-valid');            $error.text(result.errors[fieldName][0]).show();        } else {            $field.removeClass('is-invalid').addClass('is-valid');            $error.hide();        }    }});

// Disable entire form_('#myForm').prop('disabled', true);_('#myForm input, #myForm button, #myForm select').prop('disabled', true);// Enable form_('#myForm input, #myForm button, #myForm select').prop('disabled', false);

// Reset form (HTML5 way)_('#myForm')[0].reset();// Clear form values_('#myForm input[type="text"], #myForm textarea').val('');_('#myForm input[type="checkbox"], #myForm input[type="radio"]').prop('checked', false);_('#myForm select').val('');

const userData = {    name: 'John Doe',    email: 'john@example.com',    country: 'US'};Object.keys(userData).forEach(key => {    _(`[name="${key}"]`).val(userData[key]);});

_.validator.add('strongPassword', function(value) {    // Must contain uppercase, lowercase, number, and special char    const hasUpper = /[A-Z]/.test(value);    const hasLower = /[a-z]/.test(value);    const hasNumber = /\d/.test(value);    const hasSpecial = /[@$!%*?&]/.test(value);        return hasUpper && hasLower && hasNumber && hasSpecial;});// Use it_('#myForm').validate({    password: {        required: true,        strongPassword: true,        strongPasswordMessage: 'Password must be strong'    }});

_('#username').on('blur', async function() {    const username = _(this).val();        if (username.length < 3) return;        _('#username-checking').show();        try {        const response = await _.get('/api/check-username', { username });                if (response.available) {            _('#username').addClass('is-valid').removeClass('is-invalid');            _('#username-message').text('Username is available!').show();        } else {            _('#username').addClass('is-invalid').removeClass('is-valid');            _('#username-message').text('Username is taken').show();        }    } catch (error) {        console.error('Error checking username:', error);    } finally {        _('#username-checking').hide();    }});