JSFiddle - React, Tailwind, and code Playground

by Sasha Ulych

HTML

<form id="reg" class="reg form-phone validate" method="post" action="callback.php">
            <div class="align">
                <span class="title">Let’s Partner Up!</span>
                <span class="desc"><b>Sign up</b> now and our team will contact you shortly</span>
                <div class="hide-m">
                    <div class="col-xs-12 col-sm-12 col-md-12 name">
                            <i><img src="./images/Name.png" alt=""></i><input type="text" class="form-control required" id="name" name="namer" placeholder="Name*">
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 email">
                            <i><img src="./images/Email.png" alt=""></i><input type="email" class="form-control required" id="email" name="email" placeholder="Email*">
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 site">
                            <i><img src="./images/Website.png" alt=""></i><input type="text" class="form-control required" id="website" name="website" placeholder="Website*">
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 phone">
                            <i><img src="./images/Phone-Number.png" alt=""></i><input type="phone" class="form-control" id="phone" name="phone" placeholder="Phone Number">
                    </div>
                      <button type="submit" class="btn">Start now</button>
                </div>
            </div>
            </form>

JavaScript

$('.validate').submit(function (e) {
        e.preventDefault();
        var success = true;
        
        // var input_website = $(this).find('input[name="website"]');

        $field = $(this).find('.required');
        $field.removeClass('has-error');


        // if (input_website.val().length == 0) {
        //     error.website = true;
        // }
        
        $.each($field,function(i,e){
            var value = $(e).val().toLowerCase();
            if(!value){
                $(e).addClass('has-error');
                success = false;
            }
            var badWords = ["facebook", "youtube", "google", "twitter", "pinterest", "linkedin", "imonomy", "weebly", "wix"];
            for(var i = 0; i < badWords.length; i++)
                {
                    // var value = $(this).value;
                    if ($(this).attr('id') == 'website') {
                        if(value.indexOf(badWords[i]) > -1 ) {
                            $(e).addClass('has-error');
                            success = false;
                            // return false;
                        } 
                    }

                }
            if ($(this).attr('id') == 'email') {
                        var value_email = $('input#email').val();
                       $.ajax({ url: 'check-email.php',
                             data: {"email": value_email},
                             type: 'post',
                             success: function(output) {
                                console.log(output.toString());
                                if (output.toString() == 'false') {
                                        $(e).addClass('has-error');
                                        success = false;
                                    }
                                  }
                        });
                    } 
        })
        // checkEmail();
        if (success) {
            params = $(this).serializeArray();
           ...