CODEWITHSUNDEEP
javascriptformsvalidation
Varun Rajput
Varun Rajput

Reputation: 63

Multiple Form Validation in JS using Class

I want to validate 2 html forms - First form is on the FAQ page and the second form is on the contact us page. Both forms have name and phone as common input fields so I want to validate both form conveniently in JS by using Class.

My JS code is as follows for validating Name and Phone input field for FAQ form.

class FormValidate {
    constructor(nameField, phoneField,  emailField, form) {
        this.nameField = nameField;     // name input field
        this.phoneField = phoneField;   // phone input field
        this.emailField = emailField;   // email input field
        this.form = form;
    }

    // method for validation of name input
    validateName(nameField) {
        const regName = new RegExp("^[a-zA-Z\\s]*$");
        let isNameValid = false;
        let name_z = nameField.value.trim(); // input value of Name input field
        let isNameHasValidLength = name_z.length < 3 || name_z.length > 20 ? false : true;

        // Name input field is not empty and contain proper data -> Not Empty && value must be between 3 to 20 characters && follow reg expression for validation
        if( !(name_z === '') && isNameHasValidLength && (regName.test(name_Z)) ){
            isNameValid = true;
        }
        return isNameValid;
    }

    validatePhone(phoneField) {
        let isPhoneValid = false;
        let phone_z = phoneField.value.trim(); // input value of Phone input field
        let isPhoneHasValidLength = phone_z.length < 10 || phone_z.length > 13 ? false : true;  // making sure that phone number is between 10 to 13 digits -> +91 and rest 10 digits

        const regPhone = new RegExp("^([0|+[0-9]{1,5})?([7-9][0-9]{9})$");

        // Validating Phone Number -> Not Empty && Must have 10 to 13 digits only && follow reg expression for validation
        if( !(phone_z === '') && isPhoneHasValidLength && regPhone.test(phone)) {
            isPhoneValid = true;
        }
        return isPhoneValid;
    }
}

let faqForm = new FormValidate(document.querySelector('#name'), document.querySelector('#phone'), null, document.querySelector('#faq-form'));

faqForm.form.addEventListener('submit', function(e) {
    let nameOkay;
    let phoneOkay;
    let submitOkay;

    nameOkay = faqForm.validateName(faqForm.nameField);
    phoneOkay = faqForm.validatePhone(faqForm.phoneField);
    submitOkay = nameOkay && phoneOkay;

    // Prevent form submission if form input is not okay
    if (!submitOkay) {
        e.preventDefault();
    }
});

HTML form code -

<form id="faq-form" action="mail-faq.php" method="POST">
              <div class="faq-form-group"> <span class="faq-form-span-text">Name</span>
                <input type="text" placeholder="i.e, John Smith" name="name" id="name" autocomplete="off" required>
              </div>
              <div class="faq-form-group"><span class="faq-form-span-text">Phone</span>
                <input type="text" placeholder="+91 123456789" name="phone" id="phone" autocomplete="off" required>
              </div>
              <div class="faq-form-group"><span class="faq-form-span-text">Message</span>
                <textarea placeholder="Your question" name="message" id="message" autocomplete="off" required></textarea>
              </div>
              <div class="faq-form-group">
                <button class="faq-form-submit-btn" id="submit" type="submit" name="submit">Submit </button>
              </div>
</form>

The problem is that nameField.value.trim(); and phoneField.value.trim(); statements are returning value - "" Which makes the validation false.

How can I fix this problem?

Upvotes: 0

Views: 678

Answers (1)

biberman
biberman

Reputation: 5767

When you correct the typo here in (regName.test(name_Z)) (lowercase z) then the trimed vars are as expected (not "")...

Upvotes: 1

Related Questions