Check Form Validity

Applova Home page Form Validation.

This weeks task was to validate the data that is entered to the Autocomplete business Search Form I created previously. And the second form needed the same modifications.

The user was to be restricted from submitting the following:

• Spaces 
• Words less than 2 characters
• Invalid emails
• The submit button has to be disabled if the three fields were not filled.

Using minimal changes in the code this had to be done. And new libraries cannot be used. In that case jquery validation plugin was not an option. But it was the easiest one we had in mind.

A small coding for form validation and the plugin script was to be added to solve this matter.

But without using that plugin the form was validated and compromised of the invalid inputs as shown below.

function getDemoHomeSectionClick() {

    var user_input = document.forms['form']['SingleLine1'].value;    if ((user_input.trim()).length < 2) {
        $('#short_text_alert').removeClass('hide');    }

    if (user_input.trim() === "") {
        $('#empty_bsname_alert').removeClass('hide');    } else {
        $('#empty_bsname_alert').addClass('hide');    }

    if ((user_input.trim()).length >= 2 && user_input.trim() !== "") {
        //2 form section hiding and unhiding        $('.home-page__get-demo-section-1').addClass('hide');        $('.home-page__get-demo-section-2').removeClass('hide').addClass('animated fadeIn');    }
}


function checkFormValidity() {
    var user = document.forms['form']['SingleLine'].value;    

    var email = document.forms['form']['Email'].value;    

    var phone_number = document.forms['form']['PhoneNumber_countrycode'].value;   

    if ((user.trim() !=="")&&(email.trim() !=="")&&(phone_number.trim() !==""))

    {
        $("#form-button").prop('disabled',false);    

    }else{
        $("#form-button").prop('disabled','disabled');    

    }
}

The best practice would be to use names that can be distinguished easily with the other forms. But the previous developer had used these general names. For his convenience i had to use the same names to avoid confusion.

<form action='https://forms.aa.zohopublic.com/Applova/form/RequestDemo/formperma/wcqQWj8_zbhOdW3_5vmDlwi3l8zTksr_xjZnyv5E1-k/htmlRecords/submit'      name='form' id='form' method='POST' accept-charset='UTF-8'      enctype='multipart/form-data'      > 
    <div class="row home-page__get-demo-section-1">        <div class="col-sm-8">            <input id="business-name-input" class="form-control"                   placeholder="What is your business name?" type="text"                   name="SingleLine1" value="" fieldType=1 maxlength="255">            <p id="get-demo-business-name-alert" class="hide mt-0 mb-0">Name cannot be
                empty!!</p>
        </div>        <div class="col-sm-4">            <a class="btn primary-btn full-width uppercase bold-font"               onclick="getDemoHomeSectionClick()">Get A Demo</a>        </div>    </div>    <div class="row home-page__get-demo-section-2 hide" >        <div class="col-md-12">            <input class="form-control" placeholder="Your Name" type="text"                   name="SingleLine" id="Username" value="" fieldType=1 maxlength="255"                   oninput="checkGetDemoFormValidity()" />            <p id="name_alert" class="hide">Name cannot be empty!!</p>        </div>        <div class="col-md-6 mt-4">            <input class="form-control" placeholder="Email" type="text" maxlength="255"                   name="Email" id="Email" value="" fieldType=9                   oninput="checkGetDemoFormValidity()" />
        </div>        <div class="col-md-6 mt-4">            <input class="form-control" placeholder="Phone Number" type="text"                   compname="PhoneNumber" name="PhoneNumber_countrycode" phoneFormat="1"                   isCountryCodeEnabled=false value="" fieldType=11                   id="international_PhoneNumber_countrycode"                   oninput="checkGetDemoFormValidity()" />        </div>       
    </div></form>

On Tuesday the 1st of October another form validation took part in Kiosk Return On Investment(ROI ) calculator page.