Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
<head>
  <meta charset=utf-8>
  <title>Form Validation - Model#validate</title>
  <script src='http://code.jquery.com/jquery.js'></script>
  <script src='http://underscorejs.org/underscore.js'></script>
  <script src='http://backbonejs.org/backbone.js'></script>
  <script>
    jQuery(function($) {
      
      var User = Backbone.Model.extend({
        validate: function(attrs) {
          var errors = this.errors = {};
          
          if (!attrs.firstname) errors.firstname = 'firstname is required';
          if (!attrs.lastname) errors.lastname = 'lastname is required';
          if (!attrs.email) errors.email = 'email is required';
          
          if (!_.isEmpty(errors)) return errors;
        }
      });
      
      var Field = Backbone.View.extend({
        events: {blur: 'validate'},
        initialize: function() {
          this.name = this.$el.attr('name');
          this.$msg = $('[data-msg=' + this.name + ']');
        },
        validate: function() {
          this.model.set(this.name, this.$el.val());
          this.$msg.text(this.model.errors[this.name] || '');
        }
      });
      
      var user = new User;
      
      $('input').each(function() {
        new Field({el: this, model: user});
      });
      
    });
  </script>
</head>
<body>
  <form>
    <label>First Name</label>
    <input name='firstname'>
    <span data-msg='firstname'></span>
    <br>
    <label>Last Name</label>
    <input name='lastname'>
    <span data-msg='lastname'></span>
    <br>
    <label>Email</label>
    <input name='email'>
    <span data-msg='email'></span>
  </form>
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers