Not Allowing Whitespace With Javascript Validation

Question

I am working on a web form that must be validated on submit. I have a field for a first name that must follow two rules when validated, the name must have at least 3 letters and there can be no spaces between any of the characters. I have gotten it to display an error message when the name is too short, but I can't figure out how to not allow whitespace.

How can I validate this so that there are no spaces between any characters using javascript?

Here is my code so far:

<html>
    <head>
        <title>Project 5</title>
    </head>

    <body>
        <form name="myForm" id="myForm" onsubmit="return validateForm()">
            First Name: <input type="text" id="name"> <br>
            Age: <input type="text" id="age"> <br>
            Street Address: <input type="text" id="address"> <br>
            State: <select>
                <option value="la">LA</option>
                <option value="tx">TX</option>
                <option value="ok">OK</option>
                <option value="mi">MI</option>
                <option value="az">AZ</option>
            </select> <br>
            Login Password: <input type="password" id="password"> <br>
            <input type="submit" value="Submit"> <br>
        </form>

        <script type="text/javascript">
            function validateForm() {
                return checkName();
            }

            function checkName() {
                var x = document.myForm;
                var input = x.name.value;
                if(input.length < 3) {
                    alert("Please enter a name with at least 3 letters");
                    return false;
                }
                else if(input.length >= 3) {

                }
            }

        </script>

    </body>
</html>

Have you tried to match a regex /\s/ (contains a whitespace) or /^\S+$/ (whole string contains only no-whitespace)? — Krzysztof Jabłoński
– Krzysztof Jabłoński, Commented Oct 13, 2014 at 0:15
Just search for whitespaces and when you don't find any it's OK? (Of course, there's always /^\S{3,}$/) — Bergi
– Bergi, Commented Oct 13, 2014 at 0:16

loyola · Accepted Answer · 2014-11-27 09:39:35Z

4

there is an option to remove white space of all the text by just using single line of code from Javascript.

text=text.split(' ').join('');  // this will remove all the white space in your text.

answered Nov 27, 2014 at 9:39

loyola

4,0602 gold badges27 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Krzysztof Jabłoński · Accepted Answer · 2014-10-13 12:01:35Z

I'd recommend using a regex for form input validation. Check examples below:

shouldFailTooShort  = 'ts';
shouldFailSpace  = 'has space';
shouldPass  = 'no-spaces';

validationRule = /^\S{3,}$/;
validationRule.test(shouldFailTooShort) === false;
validationRule.test(shouldFailSpace) === false;
validationRule.test(shouldPass) === true;

Using regular expressions one can have all validation against a field performed in one regular expression check, like presented above. For usability however I'd recommend having one rule for each validation requirement. Then different validation rules can produce different messages and user does not get confused having to read one and always same message.

Have a peek on my favourite regular expression reference.

Edit: As requested in comment, herein I present my proposal of deploying the solution. I suggest not using alert function in production, but display the message on the page itself, e.g. in a span element.

HTML:

<form name="myForm" id="myForm" onsubmit="return validateForm();">
    First Name: <input type="text" id="name" /> <br />
    <span id="nameErrMsg" class="error"></span> <br />
    <!-- ... all your other stuff ... -->
</form>
<button id="validateTestButton" value="Validate now" onclick="validateForm();">Validate now</button>

JavaScript:

validateForm = function () {
    return checkName();
}

function checkName() {
    var x = document.myForm;
    var input = x.name.value;
    var errMsgHolder = document.getElementById('nameErrMsg');
    if (input.length < 3) {
        errMsgHolder.innerHTML =
            'Please enter a name with at least 3 letters';
        return false;
    } else if (!(/^\S{3,}$/.test(input))) {
        errMsgHolder.innerHTML =
            'Name cannot contain whitespace';
        return false;
    } else {
        errMsgHolder.innerHTML = '';
        return undefined;
    }
}

Check live example in jsfiddle.

Having some trouble figuring out how to work this into my code, like how to have it test just this one specific field. I have edited the question to show my code, would you mind taking a look and giving me a hint as to where I should work this in?

Jared Smith · Accepted Answer · 2014-10-13 00:16:01Z

1

for (var i=0, len = string.length; i<len; ++i) {
    if (string.charAt(i) === ' ') {
        alert('Name cannot have spaces!');
        break;
    }
}

answered Oct 13, 2014 at 0:16

Jared Smith

22.3k5 gold badges50 silver badges98 bronze badges

Collectives™ on Stack Overflow

Not Allowing Whitespace With Javascript Validation

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related