JSFiddle - React, Tailwind, and code Playground

by muthusamy

HTML

<div class="formField">
        <label for="txtFullName" class="required">Name</label> 
        <input id="txtFullName"  type="text" name="Full_Name" />   
    </div>
<br/>
    <div class="formField">
        <label for="txtJobTitle" >Job Title</label>
        <input id="txtJobTitle" type="text" name="Job_Title" />   
    </div>
<br/>    
    <div class="formField left">
        <label for="txtCompany">Company</label>
        <input id="txtCompany" type="text" name="Company" />   
    </div>
 <br/>   
    <div class="formField right">
        <label for="txtPhone" class="required">Phone Number</label>
        <input id="txtPhone" type="tel" name="Phone_Number" />   
    </div>
    <br/>
    <div class="formField clear">
        <label for="txtEmail" class="required">E-mail Address</label>        
        <input id="txtEmail" type="email" name="Email_Address" />   
    </div>    
         <br/>   
    <div class="formSubmit clear">
              <input type="button" id="btnSubmit" value="Submit"/>
    </div>

CSS

body
{
    font-family: Tahoma;
    font-size: 8pt;
    padding:5px;
    margin:5px;
}

JavaScript

$(document).ready(function(){
    $('#btnSubmit').click(function(){
        var bSubmit = true;
        $("label.required").each(function(){
            var txtAttrb = $(this).attr('for');
            if(txtAttrb.length > 0)
            {
                var txtVal = $("input[id=" + txtAttrb + "]");
                if(txtVal.val().length == 0)
                {
                   alert('Please Enter your value');
                   txtVal.focus(); 
                   bSubmit = false;
                   return false;
                }
            }
        });
        
        if(bSubmit == true)
        {
            //submit the form.
        }
    });
});