newforms

javascript

/** @jsx React.DOM */
'use strict';

var React = require('react'),
    Form = require('../Form'),
    newforms = require('newforms');


var ProfileForm = newforms.Form.extend({
  fname: newforms.CharField({
    required: true, 
    widget: new Form.NFLabeledInput({attrs:{
        label: "First Name",
        placeholder: "John",
        name: "fname",
    }})
  }),

  lname: newforms.CharField({
    required: true,
    widget: new Form.NFLabeledInput({attrs:{
        label: "Last Name",
        placeholder: "Doe",
        name: "lname",
    }})
  }),

  email: newforms.EmailField({
      required: true,
      widget: new Form.NFLabeledInput({attrs:{
          label: "Email",
          placeholder: "[email protected]",
          name: "email",
    }})
  }),

  phone: newforms.CharField({
      widget: new Form.NFLabeledInput({attrs:{
         label: "Phone Number",
         placeholder: "(123) 456-7890",
         name: "phone",
      }})
  }),

  cleanPhone: function(){
    //TODO phone validation
    if(!this.cleanedData.phone){

    }
  }
});


module.exports = React.createClass({
    getInitialState: function(){
      return{
        form: new ProfileForm({
          validation: 'auto',
          onStateChange: this.forceUpdate.bind(this)
        })
      }
    },

    onSubmit: function(e){
      debugger;
      e.preventDefault();

      var form = this.state.form
      if (form.validate(this.refs.form)) {
        //Valid
        debugger;
      }
    },

    render: function(){
        var form = this.state.form;
        var fields = form.boundFieldsObj();

        return (
        <div className="edit-profile-info pure-g">
           <form ref="profileForm"
                 action="/profile" 
                 method="POST" 
                 autoComplete="off" 
                 onSubmit={this.onSubmit}>
                 {form.nonFieldErrors().render()}
                <div className="pure-u-1 pure-u-md-1-2">
                    {fields.fname.render()}
                    {fields.fname.errors().render()}
                </div>

                <div className="pure-u-1 pure-u-md-1-2">
                    {fields.lname.render()}
                    {fields.lname.errors().render()}
                </div>
                <div className="pure-u-1">
                    {fields.email.render()}
                    {fields.email.errors().render()}
                </div>
                <div className="pure-u-1">
                   {fields.phone.render()}
                   {fields.email.errors().render()}
                </div>
                <input type="submit" 
                       className="tilt-btn-cta"
                       value="Save Changes"/>
           </form>
        </div>);
    }
});