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

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() 
 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 '18 at 1:02

Jack Bashford

6,27931235

asked Nov 10 '18 at 23:56

David Hendersson

143

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 '18 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 '18 at 0:00

add a comment |

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() 
 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 '18 at 1:02

Jack Bashford

6,27931235

asked Nov 10 '18 at 23:56

David Hendersson

143

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 '18 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 '18 at 0:00

add a comment |

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() 
 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 '18 at 1:02

Jack Bashford

6,27931235

asked Nov 10 '18 at 23:56

David Hendersson

143

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() 
 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 '18 at 1:02

Jack Bashford

6,27931235

asked Nov 10 '18 at 23:56

David Hendersson

143

edited Nov 11 '18 at 1:02

Jack Bashford

6,27931235

asked Nov 10 '18 at 23:56

David Hendersson

143

edited Nov 11 '18 at 1:02

Jack Bashford

6,27931235

edited Nov 11 '18 at 1:02

Jack Bashford

6,27931235

edited Nov 11 '18 at 1:02

Jack Bashford

6,27931235

asked Nov 10 '18 at 23:56

David Hendersson

143

asked Nov 10 '18 at 23:56

David Hendersson

143

asked Nov 10 '18 at 23:56

David Hendersson

143

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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 at 0:00

add a comment |

1 Answer
1

active

oldest

votes

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 '18 at 1:01

answered Nov 11 '18 at 0:04

Jack Bashford

6,27931235

thank you, what does the isNan mean?

– David Hendersson
Nov 11 '18 at 1:00

That checks if it is Not A Number.

– Jack Bashford
Nov 11 '18 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 '18 at 1:02

How would I highlight fields that have an error?

– David Hendersson
Nov 11 '18 at 1:08

Just add a class: form['password'].setAttribute("class", "invalid"); or something like that

– Jack Bashford
Nov 11 '18 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',
autoActivateHeartbeat: false,
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

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

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 '18 at 1:01

answered Nov 11 '18 at 0:04

Jack Bashford

6,27931235

thank you, what does the isNan mean?

– David Hendersson
Nov 11 '18 at 1:00

That checks if it is Not A Number.

– Jack Bashford
Nov 11 '18 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 '18 at 1:02

How would I highlight fields that have an error?

– David Hendersson
Nov 11 '18 at 1:08

Just add a class: form['password'].setAttribute("class", "invalid"); or something like that

– Jack Bashford
Nov 11 '18 at 1:09

|
show 2 more comments

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 '18 at 1:01

answered Nov 11 '18 at 0:04

Jack Bashford

6,27931235

thank you, what does the isNan mean?

– David Hendersson
Nov 11 '18 at 1:00

That checks if it is Not A Number.

– Jack Bashford
Nov 11 '18 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 '18 at 1:02

How would I highlight fields that have an error?

– David Hendersson
Nov 11 '18 at 1:08

Just add a class: form['password'].setAttribute("class", "invalid"); or something like that

– Jack Bashford
Nov 11 '18 at 1:09

|
show 2 more comments

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 '18 at 1:01

answered Nov 11 '18 at 0:04

Jack Bashford

6,27931235

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 '18 at 1:01

answered Nov 11 '18 at 0:04

Jack Bashford

6,27931235

edited Nov 11 '18 at 1:01

answered Nov 11 '18 at 0:04

Jack Bashford

6,27931235

answered Nov 11 '18 at 0:04

Jack Bashford

6,27931235

answered Nov 11 '18 at 0:04

Jack Bashford

6,27931235

thank you, what does the isNan mean?

– David Hendersson
Nov 11 '18 at 1:00

That checks if it is Not A Number.

– Jack Bashford
Nov 11 '18 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 '18 at 1:02

How would I highlight fields that have an error?

– David Hendersson
Nov 11 '18 at 1:08

Just add a class: form['password'].setAttribute("class", "invalid"); or something like that

– Jack Bashford
Nov 11 '18 at 1:09

|
show 2 more comments

thank you, what does the isNan mean?

– David Hendersson
Nov 11 '18 at 1:00

That checks if it is Not A Number.

– Jack Bashford
Nov 11 '18 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 '18 at 1:02

How would I highlight fields that have an error?

– David Hendersson
Nov 11 '18 at 1:08

Just add a class: form['password'].setAttribute("class", "invalid"); or something like that

– Jack Bashford
Nov 11 '18 at 1:09

thank you, what does the isNan mean?

– David Hendersson
Nov 11 '18 at 1:00

That checks if it is Not A Number.

– Jack Bashford
Nov 11 '18 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 '18 at 1:02

How would I highlight fields that have an error?

– David Hendersson
Nov 11 '18 at 1:08

Just add a class: form['password'].setAttribute("class", "invalid"); or something like that

– Jack Bashford
Nov 11 '18 at 1:09

|
show 2 more comments

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

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

搜尋此網誌

Dfyjkt