Note that there are some explanatory texts on larger screens.

plurals
  1. POInline form Validation
    primarykey
    data
    text
    <p>I'm trying to get my form to validate inline but can't seem to get the right syntax, at the moment I have this, which does nothing yet. The first function, formhandler is meant to change the span elements text if the element gets blured and take away the error text once the field is focused at the moment it does neither of these.</p> <pre><code>&lt;html&gt; &lt;script type = "text/javascript"&gt; document.getElementById("form").onfocus = function formHandler() { for(var i = 0; i &lt; document.getElementById("form").length; i+=1){ if(document.getElementById("form").elements[i].type == 'text') { if(document.getElementById("form").elements[i].focus()) { var onode = document.getElementById("form").elements[i].nextSibling; onode.innerHTML = ""; valid = true; } else if(document.getElementById("form").elements[i].blur()) { var onode = document.getElementById("form").elements[i].nextSibling; onode.innerHTML = "Please Fill in Field"; valid = false; } } } } function validate() { var valid = false; for(var i = 0; i &lt; document.getElementById("form").length; i+=1){ if(document.getElementById("form").elements[i].type == 'text') { if(document.getElementById("form").elements[i].value == "") { var onode = document.getElementById("form").elements[i].nextSibling; onode.innerHTML = "Please Fill in Field"; valid = true; } else{ var onode = document.getElementById("form").elements[i].nextSibling; onode.innerHTML = ""; valid = false; } } } } document.getElementById("form").onsubmit = validate; &lt;/script&gt; &lt;head&gt; &lt;title&gt;Question 1 / Vraag 1 - Basic JavaScript Validaton / Basiese JavaScript validasie &lt;/title&gt; &lt;link rel="Stylesheet" type="text/css" href="style.css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;form method="get" action="" id = "form"&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt; Firstname:&lt;/td&gt; &lt;td&gt; &lt;input type="text" name="firstname" id="firstname" /&gt;&lt;span id="fnError"&gt; &lt;/span&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; Surname:&lt;/td&gt; &lt;td&gt; &lt;input type="text" name="surname" id="surname" /&gt;&lt;span id="snError"&gt; &lt;/span&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; Age:&lt;/td&gt; &lt;td&gt; &lt;input type="text" name="age" id="age" /&gt;&lt;span id="aError"&gt; &lt;/span&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; Email:&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="email" id="email" /&gt;&lt;span id="eError"&gt; &lt;/span&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt;&lt;td colspan="2"&gt;&lt;input type="button" value="Validate" onclick = "validate()"/&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>I'm trying to achieve this without the use of jquery, so please don't suggest it, thanks in advance.</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