glen morris Posted May 24, 2013 Share Posted May 24, 2013 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 More sharing options...
HartleySan Posted May 24, 2013 Share Posted May 24, 2013 If the code were the same, it would work, so without posting some code, we can't really help you. Sorry. Link to comment Share on other sites More sharing options...
David Posted May 24, 2013 Share Posted May 24, 2013 What I've often done to help preserve my sanity is just: a) download the code, and; 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 More sharing options...
Guest Deleted Posted May 24, 2013 Share Posted May 24, 2013 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 More sharing options...
glen morris Posted May 25, 2013 Author Share Posted May 25, 2013 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! Link to comment Share on other sites More sharing options...
HartleySan Posted May 25, 2013 Share Posted May 25, 2013 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. Link to comment Share on other sites More sharing options...
Recommended Posts