JSFiddle - React, Tailwind, and code Playground

by dduncan

HTML

<form name="register">
    Name: <input type="text" name="name" id="name"/><br/>
    Email: <input type="text" name="email" id="email"/><br/>
    Password: <input type="password" name="pass" id="pass"/><br/>
    Confirm: <input type="password" name="pass2" id="pass2"/><br/>
    <input type="submit" name="Submit" value="Register" onclick="return validateForm(this.form);"/>
</form>

JavaScript

function validateForm(form) {
    var msg = "The following errors occured when registering:\n";
    var errors = 0;
    
    if(form.name.value.length == 0) {
        msg += "\t- Name is blank\n";
        errors++;
    }
    if(form.email.value.length == 0) {
        msg += "\t- Email is blank\n";
        errors++;
    }
    if(!form.email.value.match(/@/)) {
        msg += "\t- Email is invalid\n";
        errors++;
    }
    if(form.pass.value.length == 0 && form.pass2.value.length ==0) {
        msg += "\t- Password is blank\n";
        errors++
    }
    if(form.pass.value != form.pass2.value) {
        msg += "\t- Passwords do not match\n";
        errors++;
    }
    
    if(errors > 0) {
        alert(msg);
        return false;
    }
    alert("Success!"); //this is just to stop JSFiddle trying to submit a form, in real life return true and dont use this alert.
    return false;
}