JSFiddle - React, Tailwind, and code Playground
HTML
<div id="signup">
<form id="suform" method="POST" action="signup/newUser">
<p>
<label>Frist Name</label>
<input type="text" name="fName"/>
<span class="errorMessage"></span>
</p>
<p>
<label>Last Name</label>
<input type="text" name="lName"/>
<span class="errorMessage"></span>
</p>
<p>
<label>Email</label>
<input type="text" name="Email"/>
<span class="errorMessage"></span>
</p>
<p>
<label>Mobile Number</label>
<input type="text" name="MNumber"/>
<span class="errorMessage"></span>
</p>
<p>
<label>Password</label>
<input type="password" name="Password" id="Password" />
<span class="errorMessage"></span>
</p>
<p>
<label>Re Password</label>
<input type="password" name="RePassword" id="RePassword" />
<span class="errorMessage"></span>
</p>
<p>
<input type="submit" class="button" value="sign up"/>
</p>
</form>
</div>
JavaScript
$(document).ready(function(){
$('#suform').on('submit', function(e){
e.preventDefault();
var errorCount = 0;
$('span.errorMessage').text(''); // reset all error mesaage
$('input').each(function(){
var $this = $(this);
if($this.val() === ''){
var error = 'Please fill ' + $this.prev('label').text(); // take the input field from label
$this.next('span').text(error);
errorCount = errorCount + 1;
}else if($this.attr('id') === 'Password'){
//compare the two fields
if($('#Password').val() !== $('#RePassword')){
//they don't match, do stuff
}
}
});
if(errorCount === 0){
$(this)[0].submit(); // submit form if no error
}
});
});