3. Input Form Validation Woes
Monaca Onsen UI Discord Chat Github Repo

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?

    0 1 Reply
  • 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.

    0 1 Reply

  • @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

    0

  • 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

    0 1 Reply
  • 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”.

    0
 
Copyright © 2009-2016 Monaca & Onsen UI Team.