Jump to content
Larry Ullman's Book Forums

Chapter 10 - Working With Forms Error Messages...

Recommended Posts

Hi there. I'm just having some trouble with the chapter 10 forms 'putting it all together' task. 


I created the register.js file as guided by the book, which has validation using regular expressions. However, when I load the form in a browser, and try to create some errors by incorrectly filling it in, I just get the generic HTML5 error messages, which say "Please fill out this field". I want the form to validate dynamically using the validateForm() function inside of register.js, not the standard HTML '<required>' validation. 


How can I make my form use these regular expression validations to give me the 'inline' errors using <span> which the book refers to on page 415, as opposed to the HTML5 errors?


My code appears to be identical to the book, so I won't put my code in here unless it's necessary?


Thanks :)


Link to comment
Share on other sites

What I've often done to help preserve my sanity is just:

a)  download the code, and;

B)  copy and paste, and;

c)  pretend I wrote it all myself.


Seriously though, having a good look at the working rendition of the code

will often reveal niggling - but show-stopping - errors that may have slipped

in unawares while you were typing.


 ~ David

Link to comment
Share on other sites

Guest Deleted

I agree with David. In the past I've had situations where I'd checked my code 10 times and thought I had it identical to the book, yet it would not work. I'd erase my code, copy and paste the book's code, and it would work. That's how I knew it was my mistake and not the book's. At that point, I'd erase one line of the books code at a time and replace it with my code. I'd keep doing it until the script broke. Then I'd heavily scrutinize the line that broke it. I always found a mistake of some sort. :)

Link to comment
Share on other sites

Thanks guys! I deleted everything, and re-pasted everything from scratch. To my own shock, It works fine now :) I spent hours trying to figure it out, haha.


I had another small question related to the same code. I want to change the submit button's text, so that when It's disabled (checkbox unchecked) it says "Disabled" and when it's not disabled (checkbox checked) it says "Submit".

I'm a newbie at this, but I would assume the best way to go about this would be to alter the 'toggleSubmit()' function and add 'innerHTML' to it? I'm not really sure..


<div class="one"><input type="checkbox" name="terms" id="terms" required> I agree to the terms, whatever they are.</div>

<div class="one1"><input type="submit" value"Submit" id="submit" ></div>

Javascript: (register.js)

function toggleSubmit() {
      'use strict';
   var submit = U.$('submit');

   if (U.$('terms').checked) {

      submit.disabled = false;

   } else {
      submit.disabled = true;


    window.onload = function() { 
    'use strict';

      U.addEvent(U.$('theForm'), 'submit', validateForm);
      U.$('submit').disabled = true;

      U.addEvent(U.$('terms'), 'change', toggleSubmit);

I hope that makes sense? This code is using utilities.js for the event listeners and variables etc.


Thanks again for the prompt replies!


Link to comment
Share on other sites


  • Create New...