instance method Form.Element#present

View source on GitHub →

Form.Element#present() → Element

Returns true if a text input has contents, false otherwise.

Example

This method is very handy in a generic form validation routine. On the following form's submit event, the presence of each text input is checked and lets the user know if they left a text input blank.

<form id="example" class="example" action="#">
  <fieldset>
    <legend>User Details</legend>
    <p id="msg" class="message">Please fill out the following fields:</p>
    <p>
      <label for="username">Username</label>
      <input id="username" type="text" name="username" />
    </p>
    <p>
      <label for="email">Email Address</label>
      <input id="email" type="text" name="email" />
    </p>
    <input type="submit" value="submit" />
  </fieldset>
</form>
 <script type="text/javascript">
  $('example').onsubmit = function(){
    var valid, msg = $('msg')
     // are both fields present?
    valid = $(this.username).present() && $(this.email).present()
     if (valid) {
      // in the real world we would return true here to allow the form to be submitted
      // return true
      msg.update('Passed validation!').style.color = 'green'
    } else {
      msg.update('Please fill out <em>all</em> the fields.').style.color = 'red'
    }
    return false
  }
</script>

This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.