JSFiddle - React, Tailwind, and code Playground

by Wiliam_Kinaan

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"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Re Password</label>
            <input type="password" name="RePassword"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <input type="submit" class="button" value="sign up"/>
        </p>
    </form>
</div>

CSS

.errorMessage{
    color: red;
}
#signup{
    width: 860px;
    background-color: white;
    border:  1px black solid;
    padding: 0px;
    margin: 0px;
    background-image: url('http://localhost/Mar7ba/public/images/indexbackground.png');
    background-repeat: no-repeat;
}
#signup p label{
    margin-left: 200px;
    padding: 0.4em;
    color: #0986e3;
    display: inline-block;
    width: 100px;
    font:15px arial;
}
#signup p input{
    width: 300px;
    padding: 0.4em;
}
#signup input[type=submit]{
    margin:10px 10px 10px 350px;
    width: 80px;
    padding:0.4em;
}

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;   
            }
        });
        if(errorCount === 0){
            var mobileNumber = $('input[name=MNumber]');
            var email = $('input[name=Email]');
            if(isNaN(parseFloat(mobileNumber )) && !isFinite(mobileNumber )) {
                var error = 'Mobile number incorect.';
                $('input[name=MNumber]').next('span').text(error);
                errorCount = errorCount + 1; 
            }else{      
                var password= $('input[name="Password"]').val();
                var repass= $('input[name="RePassword"]').val();
                if(password!=repass){ // ensrue the two passwords are the same
                    var error2 = 'Password not matching';
                    $('input[name="RePassword"]').next('span').text(error2)
                    errorCount = errorCount + 1;  
                }else{
                    $(this)[0].submit(); // submit form if no error
                }
            }
        }
    });
});