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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...