Novalidate

Video Demonstration

The video provides a general overview of the activity, but does not contain the detail needed to complete each process. Watch the video to obtain a general idea, but follow the written steps to complete the activity. This is the Transcript of the video.

When implementing client-side and server-side validation within a website, the protection for the data is great! However, when testing to make sure the server-side validation works can be perplexing. That is where this nifty tool comes in. It uses JavaScript to add an HTML attribute to your form that disables (temporarily) the client-side validation and allows you to submit form data in order to check the operation of your server-side code. Use the following process to make the tool available and test it out:

Get the Bookmarklet

  1. Check your browser to make sure the bookmarks bar is visible. If not, use the following:
    • In Mac Chrome, "View menu > Always Show Bookmarks Bar".
    • In Mac FireFox, "View > Toolbars > Bookmarks Toolbar".
    • In Safari, "View > Show Bookmarks Sidebar".
    • In Windows Chrome, "Setting icon > Bookmarks > Show Bookmarks Bar".
    • In Windows FireFox, "Menu icon > Customize > Show / Hide Toolbars > Bookmarks Toolbar".
    • In Edge, "More icon > Settings > View Favorites Settings > turn on 'Show the favorites bar".
  2. Drag the "novalidate!" bookmarklet (below) to your bookmarks bar.
  3. NoValidate

  4. Google Chrome users: Some versions will not allow you to drag-and-drop the link or will encode the code once dropped. See the workaround below: Dragging and dropping the bookmarklet in versions of Google Chrome fails to create the bookmark. This is an issue with the Chrome browser that many users are having difficulty with.

    Google doesn’t apparently have a goal date for a resolution to this issue, however there is a workaround if you want bookmarklets to work in Chrome. Here’s how:

    1. In Chrome, click Bookmarks->Bookmark Manager.
    2. You should see a new tab with the bookmarks and folders listed.
    3. Select the “Bookmarks Tab” folder on the left.
    4. Click the menu icon in to top right corner > select "Add new bookmark".
    5. You should see two input fields. Type the name of the bookmark you would like (i.e., NoValidate) in the first field.
    6. Paste the javascript code below into the second field.
    javascript:for(var f=document.forms,i=f.length;i--;)f[i].setAttribute("novalidate",i)

Use the Bookmarklet

While you are installing the NoValidate tool now, it will not be useful until the server-side validations are in place. Once you have finished the installation, move on to implementing the server-side checks. When they are done, and you are testing, then use the NoValidate tool to disable the client-side checks, in order to test the server-side ones.

  1. To use this tool, navigate to a page with a form containing client-side validation.
  2. Click the 'NoValidate' bookmarklet.
  3. Fill in the form, but make a mistake.
  4. Submit the form.
  5. The client-side validation should be ignored and the server-side validation should take over and respond to the error.
  6. Reload the page and the novalidate tool should now be turned off. To use it again, follow the steps listed above.