JSFiddle - React, Tailwind, and code Playground

by Guruprasad Rao

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
<form autocomplete="off" class="basicForm" method="POST" id="basicForm">  
    <span id="error_message" class="error_msge">
                    
                </span>
    <div>
        &nbsp;
    </div>
<div class="em_pho cloned-row">
        <div id ="phone_div" name="phone_div">
            <select id="sel_phntype" name="sel_phntype" class="sslt_Field">
                <option selected='selected' value=""></option>
                <option value="BUSN">Business</option>
                <option value="CAMP">Campus</option>
                <option value="CELL" selected>Cellphone</option>
                <option value="CEL2">Cellphone2</option>
                <option value="FAX">FAX</option>
                <option value="HOME">Home</option>
                <option value="OTR">Other</option>
            </select>
            <span class = "ph-inline">
                <input type="text" class="cc_field txt_CC" placeholder="Country Code" id="txt_CC" maxlength="3" name="txt_CC" /> 
                <input type="text" class="pn_field" placeholder="Phone Number" id="txt_Pno" name="txt_Pno" />
                <input type="checkbox" class="preferred" checked name="preferred" id="rad_Prf" value="preferred">
                    <label class="radio-label">Preferred</label>
                    <!--<button class="btn_more" id="buttonvalue"></button>-->
                    <input type="button" value="add" class="btn_more phn_more" id="buttonvalue"/>
                    </span>
                </div> 
        </div>
<button class="btn-next" id="btn-Next" >Next</button>  
    </form>

CSS

.error_msge {
    border:1px solid red;
    width: 450px;
    margin: 0px auto;
    text-align: center;
    background-color: #FFBABA!important;
    padding: 5px;
}
.errRed {
    color: black !important;
    border: 1px solid #EA373D !important;
}

JavaScript

$(document).ready(function (){
     $(".error_msge").hide();
			var count=0;
			$(document).on("click", ".btn_more", function () { 
				var $clone = $('.cloned-row:eq(0)').clone();
				$clone.find('[id]').each(function(){this.id});
				$clone.find('.btn_more').after("<input type='button' class='btn_less1 phn_del' value='del' id='buttonless'/>")
				$clone.attr('id', "added"+(++count));
				$clone.find('.preferred').attr('checked', false);
				$clone.find('.sslt_Field').val(0);
				$(this).parents('.em_pho').after($clone);
			});

			$(document).on('click', ".btn_less1", function (){
				var len = $('.cloned-row').length;
				if(len>1){
					$(this).closest(".btn_less1").parents('.em_pho').remove();
				}
			}); 
     $('.txt_CC,.pn_field').keypress(function(e){
             if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                    //display error message
                    e.preventDefault();
                        alert("Digit only");
                    }
            });
    $('.txt_CC').on('change',function(e){
           
			var len = $('#txt_CC').val().length;
   			if(len == 1){
      			$('.cc_field').val( '00' + $('.cc_field').val());
   			}else if(len == 2){
      		$('.cc_field').val('0'+ $('.cc_field').val() );
   			}else if(len == 3){
         	}
        }); 
 $(".basicForm").validate({
       ignore: false,
         onkeyup: false,
            showErrors: function (errorMap, errorList) {
            var errors = this.numberOfInvalids();
            
            if (errors) {
                var message = errors == 1 ? 'You missed 1 field. It has been highlighted' : 'You have missed ' + errors + ' fields. Please fill the highlited field before submit.';
                $("#error_message").html(message);
                $(".error_msge").show();
            } else {
                $(".error_msge").hide();
            }
            this.defaultShowErrors();
        },
        errorPlacement: function () {
           ...