Validate Vtiger CRM 6.2 Custom Fields with jQuery Easily

To validate fields in Vtiger CRM 6.2 for a custom module using jQuery, you can follow these steps. This guide assumes that you’re customizing the module’s form and want to ensure that specific fields are validated before submission.

Step-by-Step Guide:

1. Identify the Form:
   Vtiger’s forms for custom modules typically have an ID like EditView. You need to hook into this form using jQuery.
2. Add jQuery Validation:
   Use jQuery to validate the form fields on form submission or on a specific event (e.g., blur event when the user leaves the field).
3. Custom Validation Logic:
   Create custom validation logic depending on the fields you want to validate (e.g., checking if a field is empty, or if it has a valid email format).

Sample jQuery Code:

Here is an example that shows how to validate a custom field (e.g., “phone number” and “email”) in a Vtiger form using jQuery:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
    // On form submission
    $('#EditView').submit(function(event) {
        var isValid = true;

        // Validate phone number field (assuming field name is 'phone')
        var phoneNumber = $('input[name="phone"]').val();
        if (phoneNumber == '') {
            isValid = false;
            alert('Phone number cannot be empty.');
        } else if (!/^\d{10}$/.test(phoneNumber)) {
            isValid = false;
            alert('Phone number must be 10 digits.');
        }

        // Validate email field (assuming field name is 'email')
        var email = $('input[name="email"]').val();
        if (email == '') {
            isValid = false;
            alert('Email cannot be empty.');
        } else if (!/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(email)) {
            isValid = false;
            alert('Invalid email format.');
        }

        // If the form is not valid, prevent submission
        if (!isValid) {
            event.preventDefault(); // Stop form submission
        }
    });
});
</script>

Explanation:

1. Form Selection:

• $('#EditView'): Selects the form by its ID (commonly EditView in Vtiger custom modules).

2. Field Selection:

• $('[name="phone"]'): Selects the phone field by its name attribute. Adjust this to match the name of the field in your custom module.

3. Validation Logic:

• The phone number is checked to ensure it is not empty and contains exactly 10 digits.
• The email is validated against a regular expression to ensure it’s in the correct format.

4. Prevent Submission:

• event.preventDefault() is called if validation fails, stopping the form from being submitted.

How to Use:

• Place the script in your custom module’s EditView.tpl or equivalent template file.
• Adjust the field names (phone, email) to match the actual names used in your custom module.

Additional Validations:

You can add more validations as needed. For example:

• Validate that a date field contains a valid date.
• Ensure that a number field contains only numeric values.
• Check for specific formats (like postal codes).

Tips:

• If your form already includes a submit button with JavaScript, you may want to integrate your validation logic into that instead of creating a new submit handler.
• Use CSS to highlight the fields with errors by adding error classes using jQuery.

This approach ensures real-time field validation in your Vtiger 6.2 custom module using jQuery. Let me know if you need further assistance!

Conclusion

To easily validate all the necessary fields in Vtiger 6.2 for any specific custom module with the help of performing jQuery, you can obey all above-mentioned steps. This whole guide accepts that you’re tailoring the module’s form with the best Vtiger hosting solutions and need to make sure that all crucial fields are validated before submission.