title: RAML API validation in FrontEnd
body: <p>I"m writing validation code in React application to check if input matches RAML specs.  I use a <a href="https://github.com/mulesoft-labs/node-raml-validate" rel="nofollow noreferrer">'raml-validate'</a>.</p>
  
  <p>What I cannot figure it out yet is that how I can add codes to validate input which matches RAML specs before sending POST request. </p>
  
  <p>Is it possible to implement this? </p>
  
  <p>My code is as below<br>
  Login.js</p>
  
  <pre><code>import React from 'react';
  import axios from 'axios';
  import {FormRow} from './Forms';
  import validate from '../validate';
  
  export default class LoginForm extends React.Component {
  
  constructor(props) {
  super(props);
  this.state = {email: '',
            email_error: '',
            password_error: '',
            password: ''};
  
  this.emailChanged = this.emailChanged.bind(this);
  this.passwordChanged = this.passwordChanged.bind(this);
  this.login = this.login.bind(this);
  }
  
  
  login(e) {
  e.preventDefault();
  if (!this.validateInput()) return;
  var self = this;
  if (!this.validate.user) {
  axios.post('/login', {email: this.state.email,
                password:this.state.password})
          .then(function(response) {
      self.props.onLogin(response.data.email,
                 response.data.tenant);
      }).catch(function(error) {
      if (error.response.status == 401) {
          self.setState({password_error: "Invalid email/password combination"});
      } else {
          console.log(error.message);
      }
      });
    } else {
      alert('error');
    }
  }
  
  emailChanged(e) {
  console.log('error');
  this.setState({email: e.target.value});
  }
  
  passwordChanged(e) {
  this.setState({password: e.target.value});
  }
  
  validateInput() {
  var valid = true;
  if (!this.state.email) {
      console.log('error');
      this.setState({email_error: "Please enter your email"});
      valid = false;
  } else {
      this.setState({email_error: ""});
  }
  
  if (!this.state.password) {
      this.setState({password_error: "Please enter your password"});
      valid = false;
  } else {
      this.setState({password_error: ""});
  }
  return valid;
  }
  
  render() {
  return (
      &lt;div className="container"&gt;
        &lt;form className="form-signin"&gt;
      &lt;h2 className="form-signin-heading"&gt;Twyla Client Application&lt;/h2&gt;
      &lt;FormRow fieldType={"email"}
           placeholder={"Email"}
           value={this.state.email}
           onChange={this.emailChanged}
           error={this.state.email_error}
           autoFocus={true} /&gt;
      &lt;FormRow fieldType={"password"}
           placeholder={"Password"}
           value={this.state.password}
           error={this.state.password_error}
           onChange={this.passwordChanged} /&gt;
      &lt;input className="btn btn-lg btn-primary btn-block"
             value="Log in"
             type="submit" onClick={this.login} /&gt;
        &lt;/form&gt;
        &lt;p&gt;{this.user.email}&lt;/p&gt;
        &lt;p&gt;ahaha&lt;/p&gt;
      &lt;/div&gt;
  );
  }
  }
  </code></pre>
  
  <p>validate.js </p>
  
  <pre><code>var RAMLVersion = 'RAML10'
  
  var user = validate({
    email: {
      type: 'string',
      required: true
  },
  password: {
      type: 'string',
      required: true
   }}, RAMLVersion);
  
  export const validate = () =&gt; {
   let errors = {}
   return errors
   }
  </code></pre>
  
  <p>api-spec.raml</p>
  
  <pre><code>protocols: [ HTTPS ]
  baseUri: https://www.twylahelps.com/api/{version}
  version: v1
  
  schemas:
    - bad request:
     body:
      application/json:
        example: |
          {"error": "bad request"}
  
  - unauthorized:
     body:
      application/json:
        example: |
          {"error": "unauthorized"}
  
  
  /login:
   post:
   description: logs in a user
   body:
    application/json:
      schema: |
        {
          "$schema": "http://json-schema.org/draft-04/schema",
          "type" : "object",
          "properties" : {
            "email": {
              "type": "string"
            },
            "password": {
              "type": "string"
            }
          },
          "required": ["email", "password"],
          "additionalProperties": false
        }
   reponses:
    200:
     description: User logged in successfully
     body:
      application/json:
        example: {'email': "username@email.xyz", 'tenant': "abc"}
    401:
     body:
      application/json:
        schema: unauthorized
  </code></pre>