How do I add checks to make the code to display 'Password too short' and 'Height is not a number?'

up vote
2
down vote

favorite

I have to add checks to the checkSubmit() function so that it will give the following response

Passwords do not match

Passwords is too short(minimum 4 characters)

Height is not a number

I have managed the first one however I have no idea where to start with the other two. I'll post all the code just to be safe in case I missed something.

<!DOCTYPE HTML>

<html lang="en">

<head>

    <title>Form Validation</title>

    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="styles/styles.css">

    <link rel="stylesheet" type="text/css" href="styles/forms.css">

    <script type="text/javascript">



    window.onload=init;

    var form;

        function init() {

            form = document.getElementById('testform');

            form.addEventListener("submit", checkSubmit, false);

            form.addEventListener("reset", checkReset, false);



            form['colour'].addEventListener("change", checkSubmit, false);



            form['name'].focus();

        }

        String.prototype.trim=function() {

            return this.replace(/^s+1s+$/g, '');

        }

        function whichButton(name) {

            var buttons=document.getElementsByName(name);

            for (var i in buttons) {

                if(buttons[i].checked) return buttons[i].value

            }

            return false;

        }

        function showOtherColour() {

            document.getElementById('othercolour').style.visibility=

                form['colour'].value=='other' ? 'visible' : 'hidden';

        }

        function checkSubmit() {

            error = new Array();

            //Fill the array with the error value



            form['name'].value=form['name'].value.trim();

            form['email'].value=form['email'].value.trim();

            form['town'].value=form['town'].value.trim();

            form['state'].value=form['state'].value.trim();

            form['postcode'].value=form['postcode'].value.trim();

            form['dob'].value=form['dob'].value.trim();

            form['height'].value=form['height'].value.trim();



            //Check required fields

            if(!form['name'].value)

                error.push('Missing Name');

            if(!form['email'].value)

                error.push('Missing Email Address');

            if(!form['password'].value)

                error.push('Missing Password');



            //Check valid email address

            var pattern=/^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+(.[a-zA-Z]{2,4})$/;

            if(!form['email'].value.match(pattern))

                error.push('Invalid Email Address');



            //Check State



            //Check Post Code has 4 digits

            var pattern=/^d{4}$/;

            if(!form['postcode'].value.match(pattern))

                error.push('Invalid Post Code');

            //Check password matches confirmation

            //var password = ;

            /*

            if(!form['passwordConfirm'].value.match(password)){

                error.push("Passwords don't match");

            }*/



            console.log(form['confirm'].value);

            console.log(form['password'].value);

            if(!form['confirm'].value.match(form['password'].value)){

                error.push('Passwords do not match');

            }



            //Check that one Gender item is selected

            if(whichButton('gender')===false)

                error.push('Please choose a Gender');



            //Check that "Other" field is filled

            if (!form['colour'].value ||

                (form['colour'].value=='other' && !form['othercolour'].value))

                error.push('Colour is not selected');



            if(error.length) { // if there are errors

            alert(error.join("n"))

            return false;

            }

            else return true;



            //return confirm("This will submit the form"); //Temporary placeholder

        } 

        function checkReset() {

            return confirm("This will clear the form data");

        }

    </script>

<style type="text/css">

body,td,th {

    font-size: 0.9em;

}

</style>

</head>

<body>

<div id="body">

    <h1>Form Validation</h1>

    <form action="http://test.miform.net" method="post" id="testform">

    <fieldset>

        <label>Name<br><input type="text" name="name" class="wide"></label>

        <label>Email Address<br><input type="text" name="email" class="wide"></label>

    </fieldset>

    <fieldset>

        <label>Address<br><input type="text" name="street" class="wide"></label>

        <label>Town<br><input type="text" name="town" class="narrow"></label>

        <label>State<br><input type="text" name="state" class="narrow"></label>

        <label>PostCode<br><input type="text" name="postcode" class="narrow"></label>

    </fieldset>

    <fieldset>

        <label>Password<br><input type="password" name="password" class="medium"></label>

        <label>Confirm Password<br><input type="password" name="confirm" class="medium"></label>

    </fieldset>

    <fieldset>

        <label>Date of Birth<br><input type="text" name="dob" class="medium"></label>

        <label>Height<br><input type="text" name="height" class="medium"></label>

    </fieldset>

    <fieldset>

        <legend>Gender</legend>

        <label><input type="radio" name="gender" value="f">Female</label>

        <label><input type="radio" name="gender" value="m">Male</label>

    </fieldset>

    <fieldset>

        <label>Colour

            <select name="colour">

                <option value="">Select...</option>

                <option value="black">Black</option>

                <option value="white">White</option>

                <option value="red">Red</option>

                <option value="green">Green</option>

                <option value="blue">Blue</option>

                <option value="cyan">Cyan</option>

                <option value="magenta">Magenta</option>

                <option value="yellow">Yellow</option>

                <option value="other">Other</option>

            </select>

        </label>

        <input type="text" id="othercolour">

    </fieldset>

        <input type="reset" name="reset" value="Clear Form">

        <input type="submit" name="send" value="Send Off">

    </form>

</div>

</body>

</html>

edited Nov 11 at 1:02

Jack Bashford

3,2073930

asked Nov 10 at 23:56

David Hendersson

123

This sounds like a school assignment. Also what have your tried so far to achieve all three goals? Also you could use the minlength attribute on the element => minlength="4"
– NewToJS
Nov 11 at 0:00

Well for issue #2 - Password length - I'd just go with checking if the inputted value is less than 4 characters, if so, clear out the input and show an alert for example. And for the issue #3 - Height is not a number - you could use isNan() which returns true if the variable is not a number, and false if it is, where you'd include some sort of an alert.
– Petar
Nov 11 at 0:00

add a comment |

up vote
2
down vote

favorite

I have to add checks to the checkSubmit() function so that it will give the following response

Passwords do not match

Passwords is too short(minimum 4 characters)

Height is not a number

I have managed the first one however I have no idea where to start with the other two. I'll post all the code just to be safe in case I missed something.

<!DOCTYPE HTML>

<html lang="en">

<head>

    <title>Form Validation</title>

    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="styles/styles.css">

    <link rel="stylesheet" type="text/css" href="styles/forms.css">

    <script type="text/javascript">



    window.onload=init;

    var form;

        function init() {

            form = document.getElementById('testform');

            form.addEventListener("submit", checkSubmit, false);

            form.addEventListener("reset", checkReset, false);



            form['colour'].addEventListener("change", checkSubmit, false);



            form['name'].focus();

        }

        String.prototype.trim=function() {

            return this.replace(/^s+1s+$/g, '');

        }

        function whichButton(name) {

            var buttons=document.getElementsByName(name);

            for (var i in buttons) {

                if(buttons[i].checked) return buttons[i].value

            }

            return false;

        }

        function showOtherColour() {

            document.getElementById('othercolour').style.visibility=

                form['colour'].value=='other' ? 'visible' : 'hidden';

        }

        function checkSubmit() {

            error = new Array();

            //Fill the array with the error value



            form['name'].value=form['name'].value.trim();

            form['email'].value=form['email'].value.trim();

            form['town'].value=form['town'].value.trim();

            form['state'].value=form['state'].value.trim();

            form['postcode'].value=form['postcode'].value.trim();

            form['dob'].value=form['dob'].value.trim();

            form['height'].value=form['height'].value.trim();



            //Check required fields

            if(!form['name'].value)

                error.push('Missing Name');

            if(!form['email'].value)

                error.push('Missing Email Address');

            if(!form['password'].value)

                error.push('Missing Password');



            //Check valid email address

            var pattern=/^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+(.[a-zA-Z]{2,4})$/;

            if(!form['email'].value.match(pattern))

                error.push('Invalid Email Address');



            //Check State



            //Check Post Code has 4 digits

            var pattern=/^d{4}$/;

            if(!form['postcode'].value.match(pattern))

                error.push('Invalid Post Code');

            //Check password matches confirmation

            //var password = ;

            /*

            if(!form['passwordConfirm'].value.match(password)){

                error.push("Passwords don't match");

            }*/



            console.log(form['confirm'].value);

            console.log(form['password'].value);

            if(!form['confirm'].value.match(form['password'].value)){

                error.push('Passwords do not match');

            }



            //Check that one Gender item is selected

            if(whichButton('gender')===false)

                error.push('Please choose a Gender');



            //Check that "Other" field is filled

            if (!form['colour'].value ||

                (form['colour'].value=='other' && !form['othercolour'].value))

                error.push('Colour is not selected');



            if(error.length) { // if there are errors

            alert(error.join("n"))

            return false;

            }

            else return true;



            //return confirm("This will submit the form"); //Temporary placeholder

        } 

        function checkReset() {

            return confirm("This will clear the form data");

        }

    </script>

<style type="text/css">

body,td,th {

    font-size: 0.9em;

}

</style>

</head>

<body>

<div id="body">

    <h1>Form Validation</h1>

    <form action="http://test.miform.net" method="post" id="testform">

    <fieldset>

        <label>Name<br><input type="text" name="name" class="wide"></label>

        <label>Email Address<br><input type="text" name="email" class="wide"></label>

    </fieldset>

    <fieldset>

        <label>Address<br><input type="text" name="street" class="wide"></label>

        <label>Town<br><input type="text" name="town" class="narrow"></label>

        <label>State<br><input type="text" name="state" class="narrow"></label>

        <label>PostCode<br><input type="text" name="postcode" class="narrow"></label>

    </fieldset>

    <fieldset>

        <label>Password<br><input type="password" name="password" class="medium"></label>

        <label>Confirm Password<br><input type="password" name="confirm" class="medium"></label>

    </fieldset>

    <fieldset>

        <label>Date of Birth<br><input type="text" name="dob" class="medium"></label>

        <label>Height<br><input type="text" name="height" class="medium"></label>

    </fieldset>

    <fieldset>

        <legend>Gender</legend>

        <label><input type="radio" name="gender" value="f">Female</label>

        <label><input type="radio" name="gender" value="m">Male</label>

    </fieldset>

    <fieldset>

        <label>Colour

            <select name="colour">

                <option value="">Select...</option>

                <option value="black">Black</option>

                <option value="white">White</option>

                <option value="red">Red</option>

                <option value="green">Green</option>

                <option value="blue">Blue</option>

                <option value="cyan">Cyan</option>

                <option value="magenta">Magenta</option>

                <option value="yellow">Yellow</option>

                <option value="other">Other</option>

            </select>

        </label>

        <input type="text" id="othercolour">

    </fieldset>

        <input type="reset" name="reset" value="Clear Form">

        <input type="submit" name="send" value="Send Off">

    </form>

</div>

</body>

</html>

edited Nov 11 at 1:02

Jack Bashford

3,2073930

asked Nov 10 at 23:56

David Hendersson

123

This sounds like a school assignment. Also what have your tried so far to achieve all three goals? Also you could use the minlength attribute on the element => minlength="4"
– NewToJS
Nov 11 at 0:00

Well for issue #2 - Password length - I'd just go with checking if the inputted value is less than 4 characters, if so, clear out the input and show an alert for example. And for the issue #3 - Height is not a number - you could use isNan() which returns true if the variable is not a number, and false if it is, where you'd include some sort of an alert.
– Petar
Nov 11 at 0:00

add a comment |

up vote
2
down vote

favorite

I have to add checks to the checkSubmit() function so that it will give the following response

Passwords do not match

Passwords is too short(minimum 4 characters)

Height is not a number

I have managed the first one however I have no idea where to start with the other two. I'll post all the code just to be safe in case I missed something.

<!DOCTYPE HTML>

<html lang="en">

<head>

    <title>Form Validation</title>

    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="styles/styles.css">

    <link rel="stylesheet" type="text/css" href="styles/forms.css">

    <script type="text/javascript">



    window.onload=init;

    var form;

        function init() {

            form = document.getElementById('testform');

            form.addEventListener("submit", checkSubmit, false);

            form.addEventListener("reset", checkReset, false);



            form['colour'].addEventListener("change", checkSubmit, false);



            form['name'].focus();

        }

        String.prototype.trim=function() {

            return this.replace(/^s+1s+$/g, '');

        }

        function whichButton(name) {

            var buttons=document.getElementsByName(name);

            for (var i in buttons) {

                if(buttons[i].checked) return buttons[i].value

            }

            return false;

        }

        function showOtherColour() {

            document.getElementById('othercolour').style.visibility=

                form['colour'].value=='other' ? 'visible' : 'hidden';

        }

        function checkSubmit() {

            error = new Array();

            //Fill the array with the error value



            form['name'].value=form['name'].value.trim();

            form['email'].value=form['email'].value.trim();

            form['town'].value=form['town'].value.trim();

            form['state'].value=form['state'].value.trim();

            form['postcode'].value=form['postcode'].value.trim();

            form['dob'].value=form['dob'].value.trim();

            form['height'].value=form['height'].value.trim();



            //Check required fields

            if(!form['name'].value)

                error.push('Missing Name');

            if(!form['email'].value)

                error.push('Missing Email Address');

            if(!form['password'].value)

                error.push('Missing Password');



            //Check valid email address

            var pattern=/^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+(.[a-zA-Z]{2,4})$/;

            if(!form['email'].value.match(pattern))

                error.push('Invalid Email Address');



            //Check State



            //Check Post Code has 4 digits

            var pattern=/^d{4}$/;

            if(!form['postcode'].value.match(pattern))

                error.push('Invalid Post Code');

            //Check password matches confirmation

            //var password = ;

            /*

            if(!form['passwordConfirm'].value.match(password)){

                error.push("Passwords don't match");

            }*/



            console.log(form['confirm'].value);

            console.log(form['password'].value);

            if(!form['confirm'].value.match(form['password'].value)){

                error.push('Passwords do not match');

            }



            //Check that one Gender item is selected

            if(whichButton('gender')===false)

                error.push('Please choose a Gender');



            //Check that "Other" field is filled

            if (!form['colour'].value ||

                (form['colour'].value=='other' && !form['othercolour'].value))

                error.push('Colour is not selected');



            if(error.length) { // if there are errors

            alert(error.join("n"))

            return false;

            }

            else return true;



            //return confirm("This will submit the form"); //Temporary placeholder

        } 

        function checkReset() {

            return confirm("This will clear the form data");

        }

    </script>

<style type="text/css">

body,td,th {

    font-size: 0.9em;

}

</style>

</head>

<body>

<div id="body">

    <h1>Form Validation</h1>

    <form action="http://test.miform.net" method="post" id="testform">

    <fieldset>

        <label>Name<br><input type="text" name="name" class="wide"></label>

        <label>Email Address<br><input type="text" name="email" class="wide"></label>

    </fieldset>

    <fieldset>

        <label>Address<br><input type="text" name="street" class="wide"></label>

        <label>Town<br><input type="text" name="town" class="narrow"></label>

        <label>State<br><input type="text" name="state" class="narrow"></label>

        <label>PostCode<br><input type="text" name="postcode" class="narrow"></label>

    </fieldset>

    <fieldset>

        <label>Password<br><input type="password" name="password" class="medium"></label>

        <label>Confirm Password<br><input type="password" name="confirm" class="medium"></label>

    </fieldset>

    <fieldset>

        <label>Date of Birth<br><input type="text" name="dob" class="medium"></label>

        <label>Height<br><input type="text" name="height" class="medium"></label>

    </fieldset>

    <fieldset>

        <legend>Gender</legend>

        <label><input type="radio" name="gender" value="f">Female</label>

        <label><input type="radio" name="gender" value="m">Male</label>

    </fieldset>

    <fieldset>

        <label>Colour

            <select name="colour">

                <option value="">Select...</option>

                <option value="black">Black</option>

                <option value="white">White</option>

                <option value="red">Red</option>

                <option value="green">Green</option>

                <option value="blue">Blue</option>

                <option value="cyan">Cyan</option>

                <option value="magenta">Magenta</option>

                <option value="yellow">Yellow</option>

                <option value="other">Other</option>

            </select>

        </label>

        <input type="text" id="othercolour">

    </fieldset>

        <input type="reset" name="reset" value="Clear Form">

        <input type="submit" name="send" value="Send Off">

    </form>

</div>

</body>

</html>

edited Nov 11 at 1:02

Jack Bashford

3,2073930

asked Nov 10 at 23:56

David Hendersson

123

I have to add checks to the checkSubmit() function so that it will give the following response

Passwords do not match

Passwords is too short(minimum 4 characters)

Height is not a number

I have managed the first one however I have no idea where to start with the other two. I'll post all the code just to be safe in case I missed something.

<!DOCTYPE HTML>

<html lang="en">

<head>

    <title>Form Validation</title>

    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="styles/styles.css">

    <link rel="stylesheet" type="text/css" href="styles/forms.css">

    <script type="text/javascript">



    window.onload=init;

    var form;

        function init() {

            form = document.getElementById('testform');

            form.addEventListener("submit", checkSubmit, false);

            form.addEventListener("reset", checkReset, false);



            form['colour'].addEventListener("change", checkSubmit, false);



            form['name'].focus();

        }

        String.prototype.trim=function() {

            return this.replace(/^s+1s+$/g, '');

        }

        function whichButton(name) {

            var buttons=document.getElementsByName(name);

            for (var i in buttons) {

                if(buttons[i].checked) return buttons[i].value

            }

            return false;

        }

        function showOtherColour() {

            document.getElementById('othercolour').style.visibility=

                form['colour'].value=='other' ? 'visible' : 'hidden';

        }

        function checkSubmit() {

            error = new Array();

            //Fill the array with the error value



            form['name'].value=form['name'].value.trim();

            form['email'].value=form['email'].value.trim();

            form['town'].value=form['town'].value.trim();

            form['state'].value=form['state'].value.trim();

            form['postcode'].value=form['postcode'].value.trim();

            form['dob'].value=form['dob'].value.trim();

            form['height'].value=form['height'].value.trim();



            //Check required fields

            if(!form['name'].value)

                error.push('Missing Name');

            if(!form['email'].value)

                error.push('Missing Email Address');

            if(!form['password'].value)

                error.push('Missing Password');



            //Check valid email address

            var pattern=/^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+(.[a-zA-Z]{2,4})$/;

            if(!form['email'].value.match(pattern))

                error.push('Invalid Email Address');



            //Check State



            //Check Post Code has 4 digits

            var pattern=/^d{4}$/;

            if(!form['postcode'].value.match(pattern))

                error.push('Invalid Post Code');

            //Check password matches confirmation

            //var password = ;

            /*

            if(!form['passwordConfirm'].value.match(password)){

                error.push("Passwords don't match");

            }*/



            console.log(form['confirm'].value);

            console.log(form['password'].value);

            if(!form['confirm'].value.match(form['password'].value)){

                error.push('Passwords do not match');

            }



            //Check that one Gender item is selected

            if(whichButton('gender')===false)

                error.push('Please choose a Gender');



            //Check that "Other" field is filled

            if (!form['colour'].value ||

                (form['colour'].value=='other' && !form['othercolour'].value))

                error.push('Colour is not selected');



            if(error.length) { // if there are errors

            alert(error.join("n"))

            return false;

            }

            else return true;



            //return confirm("This will submit the form"); //Temporary placeholder

        } 

        function checkReset() {

            return confirm("This will clear the form data");

        }

    </script>

<style type="text/css">

body,td,th {

    font-size: 0.9em;

}

</style>

</head>

<body>

<div id="body">

    <h1>Form Validation</h1>

    <form action="http://test.miform.net" method="post" id="testform">

    <fieldset>

        <label>Name<br><input type="text" name="name" class="wide"></label>

        <label>Email Address<br><input type="text" name="email" class="wide"></label>

    </fieldset>

    <fieldset>

        <label>Address<br><input type="text" name="street" class="wide"></label>

        <label>Town<br><input type="text" name="town" class="narrow"></label>

        <label>State<br><input type="text" name="state" class="narrow"></label>

        <label>PostCode<br><input type="text" name="postcode" class="narrow"></label>

    </fieldset>

    <fieldset>

        <label>Password<br><input type="password" name="password" class="medium"></label>

        <label>Confirm Password<br><input type="password" name="confirm" class="medium"></label>

    </fieldset>

    <fieldset>

        <label>Date of Birth<br><input type="text" name="dob" class="medium"></label>

        <label>Height<br><input type="text" name="height" class="medium"></label>

    </fieldset>

    <fieldset>

        <legend>Gender</legend>

        <label><input type="radio" name="gender" value="f">Female</label>

        <label><input type="radio" name="gender" value="m">Male</label>

    </fieldset>

    <fieldset>

        <label>Colour

            <select name="colour">

                <option value="">Select...</option>

                <option value="black">Black</option>

                <option value="white">White</option>

                <option value="red">Red</option>

                <option value="green">Green</option>

                <option value="blue">Blue</option>

                <option value="cyan">Cyan</option>

                <option value="magenta">Magenta</option>

                <option value="yellow">Yellow</option>

                <option value="other">Other</option>

            </select>

        </label>

        <input type="text" id="othercolour">

    </fieldset>

        <input type="reset" name="reset" value="Clear Form">

        <input type="submit" name="send" value="Send Off">

    </form>

</div>

</body>

</html>

javascript html

edited Nov 11 at 1:02

Jack Bashford

3,2073930

asked Nov 10 at 23:56

David Hendersson

123

edited Nov 11 at 1:02

Jack Bashford

3,2073930

asked Nov 10 at 23:56

David Hendersson

123

edited Nov 11 at 1:02

Jack Bashford

3,2073930

edited Nov 11 at 1:02

Jack Bashford

3,2073930

edited Nov 11 at 1:02

Jack Bashford

3,2073930

asked Nov 10 at 23:56

David Hendersson

123

asked Nov 10 at 23:56

David Hendersson

123

asked Nov 10 at 23:56

David Hendersson

123

This sounds like a school assignment. Also what have your tried so far to achieve all three goals? Also you could use the minlength attribute on the element => minlength="4"
– NewToJS
Nov 11 at 0:00

Well for issue #2 - Password length - I'd just go with checking if the inputted value is less than 4 characters, if so, clear out the input and show an alert for example. And for the issue #3 - Height is not a number - you could use isNan() which returns true if the variable is not a number, and false if it is, where you'd include some sort of an alert.
– Petar
Nov 11 at 0:00

add a comment |

This sounds like a school assignment. Also what have your tried so far to achieve all three goals? Also you could use the minlength attribute on the element => minlength="4"
– NewToJS
Nov 11 at 0:00

Well for issue #2 - Password length - I'd just go with checking if the inputted value is less than 4 characters, if so, clear out the input and show an alert for example. And for the issue #3 - Height is not a number - you could use isNan() which returns true if the variable is not a number, and false if it is, where you'd include some sort of an alert.
– Petar
Nov 11 at 0:00

This sounds like a school assignment. Also what have your tried so far to achieve all three goals? Also you could use the minlength attribute on the element => minlength="4"
– NewToJS
Nov 11 at 0:00

Well for issue #2 - Password length - I'd just go with checking if the inputted value is less than 4 characters, if so, clear out the input and show an alert for example. And for the issue #3 - Height is not a number - you could use isNan() which returns true if the variable is not a number, and false if it is, where you'd include some sort of an alert.
– Petar
Nov 11 at 0:00

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

Do this for the second:

if (form['password'].value.length < 4) {

    error.push("Password is too short");

}

And this for the third:

if (isNan(Number(form['height'].value))) {

    error.push("Height is not a number");

}

edited Nov 11 at 1:01

answered Nov 11 at 0:04

Jack Bashford

3,2073930

thank you, what does the isNan mean?
– David Hendersson
Nov 11 at 1:00

That checks if it is Not A Number.
– Jack Bashford
Nov 11 at 1:01

@DavidHendersson If my answer fixed your problem, can you mark it as accepted by clicking the grey tick mark to the left of my answer?
– Jack Bashford
Nov 11 at 1:02

How would I highlight fields that have an error?
– David Hendersson
Nov 11 at 1:08

Just add a class: form['password'].setAttribute("class", "invalid"); or something like that
– Jack Bashford
Nov 11 at 1:09

|
show 2 more comments

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53244597%2fhow-do-i-add-checks-to-make-the-code-to-display-password-too-short-and-height%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

Do this for the second:

if (form['password'].value.length < 4) {

    error.push("Password is too short");

}

And this for the third:

if (isNan(Number(form['height'].value))) {

    error.push("Height is not a number");

}

edited Nov 11 at 1:01

answered Nov 11 at 0:04

Jack Bashford

3,2073930

thank you, what does the isNan mean?
– David Hendersson
Nov 11 at 1:00

That checks if it is Not A Number.
– Jack Bashford
Nov 11 at 1:01

@DavidHendersson If my answer fixed your problem, can you mark it as accepted by clicking the grey tick mark to the left of my answer?
– Jack Bashford
Nov 11 at 1:02

How would I highlight fields that have an error?
– David Hendersson
Nov 11 at 1:08

Just add a class: form['password'].setAttribute("class", "invalid"); or something like that
– Jack Bashford
Nov 11 at 1:09

|
show 2 more comments

up vote
0
down vote

accepted

Do this for the second:

if (form['password'].value.length < 4) {

    error.push("Password is too short");

}

And this for the third:

if (isNan(Number(form['height'].value))) {

    error.push("Height is not a number");

}

edited Nov 11 at 1:01

answered Nov 11 at 0:04

Jack Bashford

3,2073930

thank you, what does the isNan mean?
– David Hendersson
Nov 11 at 1:00

That checks if it is Not A Number.
– Jack Bashford
Nov 11 at 1:01

@DavidHendersson If my answer fixed your problem, can you mark it as accepted by clicking the grey tick mark to the left of my answer?
– Jack Bashford
Nov 11 at 1:02

How would I highlight fields that have an error?
– David Hendersson
Nov 11 at 1:08

Just add a class: form['password'].setAttribute("class", "invalid"); or something like that
– Jack Bashford
Nov 11 at 1:09

|
show 2 more comments

up vote
0
down vote

accepted

Do this for the second:

if (form['password'].value.length < 4) {

    error.push("Password is too short");

}

And this for the third:

if (isNan(Number(form['height'].value))) {

    error.push("Height is not a number");

}

edited Nov 11 at 1:01

answered Nov 11 at 0:04

Jack Bashford

3,2073930

Do this for the second:

if (form['password'].value.length < 4) {

    error.push("Password is too short");

}

And this for the third:

if (isNan(Number(form['height'].value))) {

    error.push("Height is not a number");

}

edited Nov 11 at 1:01

answered Nov 11 at 0:04

Jack Bashford

3,2073930

edited Nov 11 at 1:01

answered Nov 11 at 0:04

Jack Bashford

3,2073930

answered Nov 11 at 0:04

Jack Bashford

3,2073930

answered Nov 11 at 0:04

Jack Bashford

3,2073930

thank you, what does the isNan mean?
– David Hendersson
Nov 11 at 1:00

That checks if it is Not A Number.
– Jack Bashford
Nov 11 at 1:01

@DavidHendersson If my answer fixed your problem, can you mark it as accepted by clicking the grey tick mark to the left of my answer?
– Jack Bashford
Nov 11 at 1:02

How would I highlight fields that have an error?
– David Hendersson
Nov 11 at 1:08

Just add a class: form['password'].setAttribute("class", "invalid"); or something like that
– Jack Bashford
Nov 11 at 1:09

|
show 2 more comments

thank you, what does the isNan mean?
– David Hendersson
Nov 11 at 1:00

That checks if it is Not A Number.
– Jack Bashford
Nov 11 at 1:01

@DavidHendersson If my answer fixed your problem, can you mark it as accepted by clicking the grey tick mark to the left of my answer?
– Jack Bashford
Nov 11 at 1:02

How would I highlight fields that have an error?
– David Hendersson
Nov 11 at 1:08

Just add a class: form['password'].setAttribute("class", "invalid"); or something like that
– Jack Bashford
Nov 11 at 1:09

thank you, what does the isNan mean?
– David Hendersson
Nov 11 at 1:00

That checks if it is Not A Number.
– Jack Bashford
Nov 11 at 1:01

@DavidHendersson If my answer fixed your problem, can you mark it as accepted by clicking the grey tick mark to the left of my answer?
– Jack Bashford
Nov 11 at 1:02

How would I highlight fields that have an error?
– David Hendersson
Nov 11 at 1:08

Just add a class: form['password'].setAttribute("class", "invalid"); or something like that
– Jack Bashford
Nov 11 at 1:09

|
show 2 more comments

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky