tarala
Uploaded by
12 SLIDES
239 VUES
120LIKES

Enhancing Web Forms with JavaScript Event Handlers and Validation Techniques

DESCRIPTION

Learn how to effectively attach event handlers to web forms using JavaScript, ensuring that user input is validated before form submission. This guide covers the process of attaching `onload` and `onsubmit` events, performing client-side validation using conditional statements, and leveraging regular expressions for data integrity. Improve your web forms by implementing event-driven techniques to enhance user experience and prevent input errors, ensuring that fields like zip code, city, and state meet specific criteria before submission.

1 / 12

Télécharger la présentation

Enhancing Web Forms with JavaScript Event Handlers and Validation Techniques

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. More Events and Validation CS380

  2. Page/window events CS380

  3. Page/window events // best way to attach event handlers on page load window.onload = function() { ... }; document.observe("dom:loaded", function() { $("orderform").observe("submit", verify); });JS CS380

  4. Form events window.observe("load", function() { $("orderform").observe("submit", verify); }); function verify(event) { if ($("zipcode").value.length < 5) { event.stop(); // cancel form submission unless } // zip code is 5 chars long }JS CS380

  5. Prototype and forms $("id")["name"]JS • gets parameter with given name from form with given id $F("id")JS • $F returns the value of a form control with the given id var name = $F("username"); if (name.length < 4) { $("username").clear(); $("login").disable(); }JS CS380

  6. Prototype and forms • other form control methods: CS380

  7. Client-side validation code <form id="exampleform" action="http://foo.com/foo.php">HTML • forms expose onsubmit and onreset events • to abort a form submission, call Prototype's Event.stop on the event window.onload = function() { $("exampleform").onsubmit = checkData; }; function checkData(event) { if ($("city").value == "" || $("state").value.length != 2) { Event.stop(event); alert("Error, invalid city/state."); // show error message } }JS

  8. Regular expressions in JavaScript • string.match(regex) • if string fits the pattern, returns the matching text; else returns null • can be used as a Boolean truthy/falsey test: varname = $("name").value; if (name.match(/[a-z]+/)) { ... } • an i can be placed after the regex for a case-insensitive match • name.match(/Xenia/i) will match “xenia", “XeNiA", ... CS380

  9. Replacing text with regular expressions • string.replace(regex, "text") • replaces the first occurrence of given pattern with the given text • varstr = “Xenia Mountrouidou"; str.replace(/[a-z]/, "x") returns "Xxnia Mountrouidou" • returns the modified string as its result; must be stored str= str.replace(/[a-z]/, "x") • a g can be placed after the regex for a global match (replace all occurrences) • str.replace(/[a-z]/g, "x") returns “XxxxxMxxxxxxxxxxx"

  10. Keyboard/text events

  11. Key event objects rototype's key code constants CS380

  12. Key event objects • issue: if the event you attach your listener to doesn't have the focus, you won't hear the event • possible solution: attach key listener to entire page body, outer element, etc. CS380

More Related