JSFiddle - React, Tailwind, and code Playground

by dying_sakura

HTML

<form name="myForm" method="post" onsubmit="return validateForm()">
	<div class="form-group">
		<label>Your Name</label> <span id="error-name"></span>
		<input type="text" name="your-name" class="form-control" placeholder="Enter your Name">
	</div>
	<div class="form-group"> 
		<label>Your Email</label> <span id="error-email"></span>
		<input type="email" name="your-email" class="form-control" placeholder="Enter your Email">
	</div>
	<div class="form-group">
		<label>Your Phone</label> <span id="error-phone"></span> <br>
		<input type="text" name="your-phone" class="form-control" placeholder="Enter your Phone">
	</div>
	<div class="form-group">
		<label>Your Message</label> <span id="error-message"></span>
		<textarea name="your-message" class="form-control" rows="10" placeholder="Enter your Message"></textarea>
	</div>
	<div class="form-group">
		<input type="submit" value="Send">
	</div>
</form>

CSS

#error-phone{
  
  color:red;
}

JavaScript

function validateForm(){
	var name = document.forms["myForm"]["your-name"].value;
	var email = document.forms["myForm"]["your-email"].value;
	var phone = document.forms["myForm"]["your-phone"].value;
	var message = document.forms["myForm"]["your-message"].value;

	if (name.length<1) {
        document.getElementById('error-name').innerHTML = " Please Enter Your Name *"
    }
    if (email.length<1) {
        document.getElementById('error-email').innerHTML = " Please Enter Your Email *";
    }
    if (phone.length<1) {
        document.getElementById('error-phone').innerHTML = " Please Enter Your Phone *";      
    }
    if (message.length<1) {
        document.getElementById('error-message').innerHTML = " Please Enter Your Message *";
    }          
    if(name.length<1 || email.length<1 || phone.length<1 || message.length<1){
       	return false;
    }            
}