JSFiddle - React, Tailwind, and code Playground

by albertmatyi

HTML

<form action="" id="f">
    <input type="text" placeholder="email" id="email">
    <input type="text" placeholder="phone" id="phone">
    <input type="submit">
</form>

JavaScript

var form = document.getElementById('f');

var inputDataIsValid = function () {
    var email = document.getElementById('email');
    if (!/^[\w.]+@[\w.]+\.\w{2,4}$/.test(email.value)) {
        return 'Wrong email: ' + email.value;
    }
    var phone = document.getElementById('phone');
    if (!/^[\d-\s]{5,}$/.test(phone.value)) {
        return 'Wrong phone: ' + phone.value;
    }
    return true;

};

form.onsubmit = function (ev) {
    var valid = inputDataIsValid();
    if (valid !== true) {
        ev.preventDefault();
        alert('Invalid input data. Reason' + valid);
    } else {
        alert('Valid data. Proceeding...');
    }
};