JSFiddle - React, Tailwind, and code Playground

by Gerald Gillespie

HTML

<form action="whatever">
    <br/><span>Email:</span>

    <input id='email' class='disallow' type='email' name='email' value="[email protected]" />
    <br/> <span>User Name</span>

    <input id='username' class='disallow' type='text' name='username' value="bad username" />
    <br/> <span>Pasword</span>

    <input id='pwd' class='disallow' type='password' name='pwd' value=""/>
    <input type="submit" value="submit" />
</form>

CSS

.error { color: red}

JavaScript

$(document).ready(function () {
    $('form').on('submit', function () {
        var spaceTest = new RegExp('^[^ \t\r\n\v\f]*$'),
            cont = true;

        $(this).find('.disallow').each(function () {
            if (!cont) {
                return false
            };
            var $this = $(this),
                m = spaceTest.exec($this.val());
            if (m === null) {

                alert('you have a space in ' + $this.prev('span').text());
                $this.add($this.prev('span')).addClass('error');
                        $this.closest('form').find('[type="submit"]').attr('disabled','disabled');
                cont = false;
            } else {

            }
        });
        if (cont) {
            alert('everything is ok, but i do not want to submit a fiddle');
                    $(this).find('[type="submit"]').attr('disabled','');
        }

        return false;
        

    });


});