Input Form Validation Woes
-
I’m using splitter to separate my pages, all within the index.html file. I present a form to the user. I use my own javascript validation function. How do I return the user to the form if the user has left a field blank?
-
@aferlazzo @AnthonyFerlazzo_twitter What do you exactly mean by “return the user to the form”? Did you change the page in the splitter? Perhaps you can use
ons-navigator
to push and pop back? Perhaps it would be easier if you show some code.
-
@Fran-Diox said:
Did you change the page in the splitter
I’m not sure I know what you mean.
I am now using Ajax to update my server database. I have a submit button click handler. It runs a javascript function to ensure 5 required fields are filled in.If the are not how to I take the user back to the page that has the form from my javascript function?
I guess that is the key. How do I change it in the splitter?
Thanks in advance,
Tony
-
Hello,
Three questions have me stumped. Let me know if you can answer them.
A code snippet is below.
When the script begins, the text of each <ons-list-item>is displayed briefly in a flash of unformatted text on line one of the page before the screen is blanked out. Then the formatted page is displayed.
How do I kept that initial text from being displayed?
In the body of the home page I am trying to have the md-menu icon be displayed in an inline fashion. How do I do that?
Go to the Attend Event page using the splitter menu. Here I present the user with a simple form. When the ‘Reserve My Space’ button is pressed I want to verify the forms fields are not blank. If one is blank I want to display a dialog box with a message like, ‘Please fill in your name’ and then have the form remain on the page so the user can fill-in the empty field.
How do I control the page transitions so I can keep the page with the form on the screen?
Here is a demo code snippet
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <title>Tucson Business Networking</title> <link rel='stylesheet prefetch' href='//unpkg.com/onsenui/css/onsenui.css'> <link rel='stylesheet prefetch' href='//unpkg.com/onsenui/css/onsen-css-components.css'> <link rel='stylesheet prefetch' href='//tucsonbusinessnetworking.com/style.css'> </head> <body> <ons-splitter> <ons-splitter-side id='menu' side='left' width='210px' collapse swipeable> <ons-page> <ons-list> <ons-list-item modifier='longdivider' onclick='fn.load("index.html")' tappable> Home </ons-list-item> <ons-list-item modifier='longdivider' onclick='fn.load("attend.html")' tappable> Attend One Event </ons-list-item> </ons-list> </ons-page> </ons-splitter-side> <ons-splitter-content id='content' page='index.html'></ons-splitter-content> </ons-splitter> <template id='index.html'> <ons-page> <ons-toolbar> <div class='left'> <ons-toolbar-button onclick='fn.open()'> <ons-icon icon='md-menu'></ons-icon> </ons-toolbar-button> </div> <div class='center'> Tucson Business Networking </div> </ons-toolbar> <h2 id='after_tab_bar_index'> </h2> <ons-list-item modifier='longdivider' class='left'>Welcome! It is our pleasure that you've decided to visit our website. Take a look around by clicking on the menu icon, <ons-icon icon="md-menu" style="display:inline-block;" class="ons-icon"></ons-icon>.</ons-list-item> </ons-page> </template> <template id='attend.html'> <ons-page> <ons-toolbar> <div class='left'> <ons-toolbar-button onclick='fn.open()'> <ons-icon icon='md-menu'></ons-icon> </ons-toolbar-button> </div> <div class='center'>Attend an Event</div> </ons-toolbar> <h2 id='after_tab_bar_attend'> </h2> <ons-list> <ons-list-item modifier='longdivider'> <p> Please fill out all the fields below to get started. </p> </ons-list-item> </ons-list> <ons-list> <form id='attend_form' method='post'> <ons-list-item modifier='longdivider'> <ons-input type='text' placeholder='First Name' name='first_name' id='first_name'> </ons-input> </ons-list-item> <ons-list-item modifier='longdivider'> <ons-input type='text' placeholder='Last Name' name='last_name' id='last_name'> </ons-input> </ons-list-item> <ons-list-item modifier='longdivider'> <ons-input type='email' placeholder='Email' name='email' id='email'> </ons-input> </ons-list-item> <ons-list-item modifier='longdivider'> <ons-input type='text' placeholder='Cell Phone' name='cell_phone' id='cell_phone'> </ons-input> </ons-list-item> <ons-list-item modifier='longdivider'> <label for='event_month'>For Event on</label>: <ons-select select-id='event_month'> <option selected value='99'>Select Month</option> <option value='01'>January</option> <option value='02'>February</option> <option value='03'>March</option> <option value='04'>April</option> <option value='05'>May</option> <option value='06'>June</option> <option value='07'>July</option> <option value='08'>August</option> <option value='09'>September</option> <option value='10'>October</option> <option value='11'>November</option> <option value='12'>December</option> </ons-select> <ons-select select-id='event_year'> <option selected value='2099'>Select Year</option> <option value='2019'>2018</option> <option value='2019'>2019</option> <option value='2020'>2020</option> <option value='2021'>2021</option> </ons-select> </ons-list-item> <ons-list-item class='left' modifier='longdivider'> <button class="button red-btn" onclick="clear_form('attend_form');">Cancel</button> <button class="button green-btn" onclick="attempt_to_attend(); ">Reserve My Space</button> </ons-list-item> </form> </ons-list> <ons-dialog id="dialog-A"> <div style="text-align: center; padding: 10px;"> <p id='dialog-A-message'> This template is outside any ons-page<br /> This dialog is within its own template. </p> <p> <ons-button onclick="hideDialog('dialog-A')">Close</ons-button> </p> </div> </ons-dialog> </ons-page> </template> <script src='//unpkg.com/onsenui/js/onsenui.js'></script> <script> window.fn = {}; /** * The ons-splitter-side element has an id of menu */ window.fn.open = function() { var menu = document.getElementById('menu'); menu.open(); }; window.fn.load = function(page) { var content = document.getElementById('content'); var menu = document.getElementById('menu'); content.load(page) .then(menu.close.bind(menu)); }; function clear_form(form_name) { 'use strict'; if (confirm('Are you sure you want to delete your keyed in values?') === true) { document.getElementById(form_name).reset(); } } var showDialog = function(id) { "use strict"; document .getElementById(id) .show(); }; var hideDialog = function(id) { "use strict"; document .getElementById(id) .hide(); }; var toggleDialog = function() { "use strict"; var dialog = document.getElementById('dialog-A'); if (dialog) { dialog.show(); } else { ons.createDialog('dialog.template') .then(function(dialog) { dialog.show(); }); } }; function verify_required_fields(month, year, first_name, last_name, email, cell_phone, amount, return_to) { 'use strict'; var content; console.log('verify_required_fields()'); if (first_name == '') { showDialog('dialog-A'); content = document.querySelector('#content'); content.load(return_to); return; } if (last_name == '') { document.querySelector('#dialog-A-message').value = 'Please enter your last name'; content = document.querySelector('#content'); content.load(return_to); return; } if (email == '') { document.querySelector('#dialog-A-message').value = 'Please enter your email address'; toggleDialog(); content = document.querySelector('#content'); content.load(return_to); return; } if (cell_phone == '') { document.querySelector('#dialog-A-message').innerText = 'Please enter your cell phone'; content = document.querySelector('#content'); content.load(return_to); return; } if (parseInt(month, 10) > 0 && parseInt(month, 10) < 13) { document.querySelector('#dialog-A-message').value = 'Please choose a month'; content = document.querySelector('#content'); content.load(return_to); return; } if (parseInt(month, 10) > 2017 && parseInt(month, 10) < 2037) { document.querySelector('#dialog-A-message').value = 'Please choose a year'; content = document.querySelector('#content'); content.load(return_to); return; } if (amount === '$15') { // verified that attend form is valid so process credit card if (attempt_attend_credit_card_charge( event_month, event_year, first_name, last_name, email, cell_phone)) { // card went through so add to database attend_add_to_database(event_month, event_year, first_name, last_name, email, cell_phone); } } else { // verified that application form is valid so process credit card if (attempt_join_credit_card_charge(j_first_name, j_middle_name, j_last_name, j_preferred_name, j_email, j_cell_phone, j_office_phone, j_business_name, j_business_address, j_city, j_state, j_zip, j_job_title, j_website, j_business_type, j_business_description, j_seeking, j_join_agreement, j_join_month, j_join_year)) { //charge went through so add to database join_add_to_database(); } //submit the credit card form document.forms.PrePage.submit(); } } /** * * call the Authority.net API to charge to user $15 * @returns {boolean} the result of the charge attempt */ function attempt_attend_credit_card_charge() { "use strict"; console.log('attempt_attend_credit_card_charge()'); return true; } /** * * attempt_to_attend() runs when the 'Reserve My Space' button * is pressed in the attend_form. The 6 required fields are sent to be validated. * */ function attempt_to_attend() { "use strict"; var content; var event_month = document.querySelector('#event_month').value; var event_year = document.querySelector('#event_year').value; var first_name = document.querySelector('#first_name').value; var last_name = document.querySelector('#last_name').value; var email = document.querySelector('#email').value; var cell_phone = document.querySelector('#cell_phone').value; console.log('attempt_to_attend()'); verify_required_fields(event_month, event_year, first_name, last_name, email, cell_phone, '$15', 'attend.html'); } </script> </body> </html>
Thanks for answering my questions.
Tony
-
@aferlazzo Well, first you need to make sure you are not changing or refreshing the page when you submit the form: https://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit
If you do that then you can easily show a dialog or something if an input is invalid. The page transitions are controlled with
ons-navigator
components.For the unformatted text, perhaps try using local dependencies so the CSS is loaded earlier. Otherwise, you will probably have a loading screen at the beginning of your app that will hide all the “set up”.