Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript and HTML form validation checks
    primarykey
    data
    text
    <p>i am trying to learn html and javascript. I have created an html form and am using javascript to validate the fields. I have a isNaN check for the age field, a regex check for emial and a presence check for all fields. I am currently outputting the form to the address bar but this does not work as i am getting errors.</p> <pre><code>&lt;title&gt; &lt;/title&gt; &lt;script type="text/javascript"&gt; function validate() { var errors = 0; if (isNumeric(document.getElementById("age").value) == false) { errors++; } if (emailCheck(document.getElementById("email").value) == false) { errors++; } var inputBoxes = document.getElementsByTagName('input'); for(var i= 0; i &lt; inputBoxes.length; i++) { if(inputBoxes[i].type != 'text') continue; if(presenceCheck(inputBoxes[i].value) == false) { errors++; } } console.log(errors); if(errors == 0) { window.location.assign("output.html#" + "%%" + "name" + "%%" + document.getElementById("name").value + "%%" + "email" + "%%" + document.getElementById("email").value + "%%" + "age" + "%%" + document.getElementById("age").value + "%%" + "comments" + "%%" + document.getElementById("comments").value); } } function isNumeric(number) { return !isNaN(number) &amp;&amp; number != null &amp;&amp; number != ""; } function emailCheck(email) { var emailRegex = /\s+@\s+.\s+/; return emailRegex.test(email); } function presenceCheck(data) { var regex = /\s+/; return regex.test(data); } &lt;/script&gt; </code></pre> <p>Below is the form which is just incased in body tags at the moment</p> <pre><code>&lt;form id="frmA" name="frmA"&gt; &lt;label name="frmName"&gt;Name:&lt;/label&gt;&lt;br /&gt; &lt;input form="frmA" type="text" name="frmName" id="name"/&gt;&lt;br /&gt; &lt;label name="frmEmail"&gt;E-Mail:&lt;/label&gt;&lt;br /&gt; &lt;input form="frmA" type="text" name="frmEmail" id="email"/&gt;&lt;br /&gt; &lt;label name="age"&gt;Age:&lt;/label&gt;&lt;br /&gt; &lt;input form="frmA" name="frmAge" id="age"/&gt;&lt;br /&gt; &lt;label name="frmComments"&gt;Comments:&lt;/label&gt;&lt;br /&gt; &lt;textarea form="frmA" cols="50" rows="10" id="comments"&gt;&lt;/textarea&gt;&lt;br /&gt; &lt;/form&gt; &lt;button onClick="validate();"&gt;Submit&lt;/button&gt; </code></pre> <p>i know that the checks work when no data is present however when i input data in the form and hit submit i am still faced with 4 errors. (there are 5 errors with no data: 3x presence checks, 1 for the regex and one for the isNaN)</p> <p>My question therefore is why am i still getting errors and why do i get no output.</p> <p>Any help would be greatly appreciated. </p> <p>Extra: i would also like the input fields to change colour when there is an error.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload