JSFiddle - React, Tailwind, and code Playground

by Prashant Tapase

HTML

<div id="wrapper"> <!--Wrapper Starts Here-->
    
            <div id="container1">
                
            </div>
        
            
            <div id="container2">
                
                <form name="facebook" id="facebook" action="" method="post">
                    
                    <div style="padding-bottom: 56px;">
                            <input type="text" name="fullname" id="fullname" class="inputfield">
                        </div>

                    <div style="padding-bottom: 56px;">
                            <input type="text" name="email_id" id="email_id" class="inputfield">
                        </div>

                    <div style="">
                            <input type="text" name="mobileno" id="mobileno" class="inputfield">
                        </div>

                    <input type="submit" name="submit" id="submit" value='send' onsubmit="return formcheck(); "> 
                    
                </form>
                
            </div>
            
	</div> <!--Wrapper Ends Here-->

JavaScript

function formcheck(){
            
            validatename();
            
            validnumber();

            validateemail();
            
            alert('ajax');
                $.ajax({
                        
                            url:'datafetch.php',
                            method: 'POST',
                            data : $('#facebook').serialize(),
                            success: function(data)

                            {
                                
                                popup();

                            }
                            
                        });
            
        }
        function validatename() {
            var x = document.forms["facebook"]["fullname"].value;
            if (x == null || x == "") {
                alert("First name must be filled out");
                return false;
            }
        }
        
        function validnumber()  
        {  alert('in');
          var inputtxt = document.forms["facebook"]["mobileno"];
          alert(inputtxt);
          var phoneno = /^\d{10}$/;  
          if(inputtxt.value.match(phoneno))  
          {  
              return true;  
          }  
          else  
          {  
             alert("Not a valid Phone Number");  
             return false;  
          }  
        }  
        
        function validateemail() {
            var x = document.forms["facebook"]["email_id"].value;
            var atpos = x.indexOf("@");
            var dotpos = x.lastIndexOf(".");
            if (atpos< 1 || dotpos<atpos+2 || dotpos+2>=x.length) {
                alert("Not a valid e-mail address");
                return false;
            }
            
        }