Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
glen morris

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 :)

 

Share this post


Link to post
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

Share this post


Link to post
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. :)

Share this post


Link to post
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..

HTML:

<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!

 

Share this post


Link to post
Share on other sites

For a submit input, you need to change the value of the value attribute to change the text displayed on the button. In other words, toggle the value property of the DOM object and you should be fine.

Share this post


Link to post
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.

Guest
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.

Loading...
Sign in to follow this  

×
×
  • Create New...