Alien-GvaScript
8 results

 view release on metacpan or  search on metacpan

test/functional/form/form.gvascript.html  view on Meta::CPAN 

  <script type="text/javascript">
    /**
     * Declaring Form Global Responders
     */
  GvaScript.Form.Responders.register({
    onInit: function(gva_form) {
      gva_form.valid = new Validation(gva_form.formElt, {onSubmit:false});
      log('Form <em>[Late]</em> onInit: validation module attached')
    },

    onChange: function(gva_form, event) {
      log('Form <em>[Late]</em> onChange');
      gva_form.formElt.addClassName('form-edited');
      gva_form.formElt.removeClassName('form-error');
      
      setInfoMessage('form updated ... make sure to save.');
    },

    onBeforeSubmit: function(gva_form) {
      log('Form <em>[Late]</em> onBeforeSubmit: hides form message and resets its classnames');
      gva_form.formElt.removeClassName('form-edited');
      gva_form.formElt.removeClassName('form-error');
      hideMessage();
    },

    onAfterSubmit: function(gva_form) {
      log('Form <em>[Late]</em> onAfterSubmit: display success message');
      setInfoMessage('thank you!'); 
    },

    onDataValidationError: function(gva_form, msg) {
      log('Form <em>[Late]</em> onDataValidationError: form submission failed on the client-side. set form-error classname and display error message');
      gva_form.formElt.addClassName('form-error'); 
      gva_form.formElt.removeClassName('form-edited'); 
      setErrorMessage(msg);
    },

    onSubmitFailure: function(gva_form, msg) {
      log('Form <em>[Late]</em> onSubmitFailure: form submission failed on server-side. set form-error classname and display error message');
      gva_form.formElt.addClassName('form-error'); 
      gva_form.formElt.removeClassName('form-edited'); 
      setErrorMessage(msg);
    },

    onBeforeDestroy: function(gva_form) {
      gva_form.valid = null;
      log('Form <em>[Late]</em> onBeforeDestroy : validation module detached');
    }

  });

  GvaScript.Form.EarlyResponders.register({
    onBeforeSubmit: function(gva_form) {
      log('Form <em>[Early]</em> onBeforeSubmit: checks for form changes then runs fields validation');

      if(!gva_form.formElt.hasClassName('form-edited')) {
        alert('nothing change - skip trip to server');
        return false;
      }
      else {
        if (gva_form.valid.validate()) return true;
        else {
          gva_form.fire('DataValidationError', 'Some fields failed to validate!');
          return false;
        }
      }
    }
  });
  </script>
</head>

<body>
  [<a href="#" onclick="$('logs').update()">Clear</a>]
  <div id="logs"></div>
  <div class="message" id="app_message"></div>


  <form id="my_book" onsubmit="return false;">

    <h2>Book</h2>
    
    <div class="header">
      <h3>Data</h3>

      <div>
        <label>Title <sup>*</sup></label>
        <input type="text" name="book.TITLE" class="required" autofocus/>
      </div>
      <div>
        <label>Description <sup>*</sup></label>
        <textarea name="book.DESCRIPTION" class="required" minLength="10"></textarea>
      </div>

    </div>

    <div class="authors">
      <h3>Authors 
        <span class="icon-add" onclick="GvaScript.Form.add('book.authors')"></span>
      </h3>

      <div repeat="authors" repeat-prefix="book" 
           onAdd="" 
           onRemove="">

        <div class="author">
          <span class="icon-delete" onclick="GvaScript.Form.remove('#{authors.path}')"></span>
          <span class="counter">#{authors.count}</span> 
          <div>
            <label>Author name <sup>*</sup></label>
            <input type="text" name="#{authors.path}.NAME" class="required" autofocus />
          </div>
          <div>
            <label>Author email</label>
            <input type="text" name="#{authors.path}.EMAIL" class="validate-email" />
          </div>
          <div>
            <label>Author remarks</label>
            <textarea name="#{authors.path}.REMARKS"></textarea>
          </div>
        </div>

      </div>

    </div>
    <div style="clear:both"></div>
    <div id="actionsbar"></div>
  </form>

  <br/><br/>
  <em>This example uses 
  <a href="http://tetlaw.id.au/view/javascript/really-easy-field-validation" target="_blank">'really easy field validation'</a> 
  module by Andrew Tetlaw (Dexagogo) to perform client-side form fields validation.</em>

</body>

<script type="text/javascript">
var book_data = {
  TITLE: 'The Bible',
  DESCRIPTION: 'A book about Jesus, God and everything.\n\nBest-seller!',

  authors: [
    {
      NAME: 'Jesus Christ', 
      EMAIL: 'jesus@holy.org',
      REMARKS: 'Savior of mankind, died for your sins.'
    },
    {
      NAME: 'Moses ', 
      REMARKS: 'Can write stuff in stone. Will split the sea when necessary.'
    }
  ]
}

var my_form_obj = new GvaScript.Form('my_book', {
  datatree: book_data,
  dataprefix: 'book',

  actionsbar : {
      container :  'actionsbar',
      actions   : [
          {
              label : 'Submit Form',
              type  : 'submit'
          },
          {
              label : 'to_hash',
              type  : 'button',
              callback : function() {
                log(Object.toJSON(my_form_obj.to_hash()))
              }
          },
          {
              label : 'to_tree',
              type  : 'button',



( run in 0.931 second using v1.01-cache-2.11-cpan-70e19b8f4f1 )