JSFiddle - React, Tailwind, and code Playground

by codebazz

HTML

<form id="form" action="home/contact" method="post">
    <table style="padding-top: 20px; padding-left: 20px;">
        <tr>
            <td> <label>Your Firstname</label></td>
            <td><input name="fname" type="text" class="" value=""/><div style="color:red" class="fname"></div></td>
        </tr>
        <tr>
            <td><label>Your Lastname</label></td>
            <td><input name="lname" type="text" class="" value=""/><div style="color:red" class="lname"></div> </td>
        </tr>
        <tr>
            <td><label>Email</label></td>
            <td><input name="email" type="text" class="" value=""/> <div style="color:red" class="load"></div></td>
        </tr>
        <tr>
            <td> <label>Type Your Message</label></td>
            <td> <textarea name="message" rows="5" cols="80"></textarea></td>
        </tr>
        <tr>
            <td> <label>&nbsp;</label></td>
            <td> <input id="send" name="submit" type="submit" value="Send" /></td>
        </tr>

    </table>
</form>

JavaScript

$(document).ready(function(){
     
        $('#form').submit(function(event) {
           alert(1);
            var fname = $('input[name=fname]').val();
            var lname = $('input[name=lname]').val();
            var email = $('input[name=email]').val();

            if(email=="")
            {
                $(".load").html("Invalid Email");
                return false;
               event.preventDefault();
            }
             if(fname=="")
            {
                $(".fname").html("Fill This Field");
                //return false;
                event.preventDefault();
            }
            if(lname=="")
            {
                $(".lname").html("Fill This Field");
               // return false;
                event.preventDefault();
            }


        });

    })