Input Form Validation Woes

aferlazzo

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?

Fran Diox

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

aferlazzo

@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

aferlazzo

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

Fran Diox

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

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Input Form Validation Woes