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?


  • Onsen UI

    @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'>&nbsp;</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'>&nbsp;</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>:&nbsp;
                        <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>
                        &nbsp;&nbsp;&nbsp;
                        
                        <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


  • Onsen UI

    @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”.


Log in to reply