Incomplete Validation

by lindsay bradford

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <form id="checkout">
        <div class="form-group">
          <label for="username">Username</label>
          <input type="text" class="form-control" id="username" value="Bob" required>
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" class="form-control" id="password" value="Password" required>
        </div>
        <button type="submit" id="checkoutSubmit" class="btn btn-submits btn-primary">Submit</button>
      </form>
    </div>
  </div>
</div>
<hr>

<p>Scenario: If a form submission fails server side validation a JSON response is returned with a status code, a message about the status, and the form errors.</p>
<p>Task: Given the incomplete success function and the jsonData implement code so that a Bootstrap alert containing the error messages for each input comes below the input they pertain to.</p>

JavaScript

var jsonData = {
  "status": -1,
  "message": "Form validation errors",
  "formErrors": {
    "username": [{
      "noNumber": "'Bob' must contain at least one number (0-9)"
    }, {
      "noSymbol": "'Bob' must contain at least one symbol (!@#$%^&*)"
    }],
    "password": [{
      "noNumber": "'Must contain at least one letter (a-z A-Z)"
    }]
  }
};

$.ajax({
  type: 'POST',
  dataType: 'json',
  url: '/echo/json/',
  data: {
    json: JSON.stringify(jsonData)
  },
  success: function(data) {
    
  }
});