Add grade form validation

This commit is contained in:
bmv root 2017-05-05 15:30:11 -04:00
parent dbdaec3f31
commit 5f33e87dbd
6 changed files with 76 additions and 6 deletions

View File

@ -16,4 +16,5 @@
//= require bootstrap/bootstrap-rails-tooltip //= require bootstrap/bootstrap-rails-tooltip
//= require bootstrap/bootstrap-rails-popover //= require bootstrap/bootstrap-rails-popover
//= require Chart //= require Chart
//= require grades
//= require jquery-ui //= require jquery-ui

View File

@ -1,3 +0,0 @@
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/

View File

@ -0,0 +1,64 @@
$().ready(function(){
console.log("Ready")
document.getElementById('grade-form').onsubmit = function(){
var form_elements = getGradeFormElements()
if(elementsAreEmpty(form_elements)){
alert("There is an empty field")
return false
}
if(!shortNameIsValid(form_elements.Short_name)){
alert("Short name must only contain alphanumeric characters and be <= 5 characters")
return false
}
if(!measurementsAreNumbers(form_elements)){
alert("An entered width,height,or length is not valid.(must be of form 1,1.1,0.1)")
return false
}
return true
}
})
function getGradeFormElements(){
var form = document.getElementById('grade-form')
return {
Full_name: form["grade[Full_name]"].value,
Short_name: form["grade[Short_name]"].value,
Width_max: form["grade[Width_max]"].value,
Width_min: form["grade[Width_min]"].value,
Height_max: form["grade[Height_max]"].value,
Height_min: form["grade[Height_min]"].value,
Length_max: form["grade[Length_max]"].value,
Length_min: form["grade[Length_min]"].value
}
}
function elementsAreEmpty(elements){
for(key in elements){
if(elements[key] == ""){
return true
}
}
return false
}
function shortNameIsValid(shortName){
var shortNameRegexp = new RegExp(/[a-zA-Z0-9]{1,5}/)
if(shortName.match(shortNameRegexp) == null || shortName.length > 5){
return false
}
return true
}
function measurementsAreNumbers(elements){
var regexp = new RegExp(/[0-9]+(\.[0-9]+){0,1}/)
if(elements.Height_max.match(regexp) == null || elements.Height_min.match(regexp) == null){
return false
}
if(elements.Width_max.match(regexp) == null || elements.Width_min.match(regexp) == null){
return false
}
if(elements.Length_max.match(regexp) == null || elements.Length_min.match(regexp) == null){
return false
}
return true
}

View File

@ -14,7 +14,8 @@ class GradesController < ApplicationController
end end
def create def create
Grade.create(grades_params) grade = Grade.new(grades_params)
grade.save
redirect_to '/grades' redirect_to '/grades'
end end

View File

@ -1,3 +1,10 @@
class Grade < ApplicationRecord class Grade < ApplicationRecord
self.primary_key = 'Short_name' self.primary_key = 'Short_name'
def initialize(params)
super
self.Volume_max = (self.Height_max.to_f + self.Width_max.to_f + self.Length_max.to_f).to_s
self.Volume_min = (self.Height_min.to_f + self.Width_min.to_f + self.Length_min.to_f).to_s
end
end end

View File

@ -62,14 +62,14 @@
<!--Form for new grade here--> <!--Form for new grade here-->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<form action="/grades" method="POST"> <form action="/grades" id="grade-form" method="POST">
<%=csrf_meta_tag%> <%=csrf_meta_tag%>
<div class="form-group"> <div class="form-group">
<label>Full Name</label> <label>Full Name</label>
<input type="text" class="form-control" placeholder="Full name of grade" name="grade[Full_name]"> <input type="text" class="form-control" placeholder="Full name of grade" name="grade[Full_name]">
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Short Name(10 characters max)</label> <label>Short Name(5 characters max)</label>
<input type="text" class="form-control" placeholder="Short name of grade" name="grade[Short_name]"> <input type="text" class="form-control" placeholder="Short name of grade" name="grade[Short_name]">
</div> </div>
<div class="row"> <div class="row">