Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. aferlazzo
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    aferlazzo

    @aferlazzo

    0
    Reputation
    3
    Posts
    616
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    aferlazzo Follow

    Posts made by aferlazzo

    • RE: Input Form Validation Woes

      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

      posted in Onsen UI
      aferlazzo
    • RE: Input Form Validation Woes

      @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

      posted in Onsen UI
      aferlazzo
    • 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?

      posted in Onsen UI
      aferlazzo