Skip to content

6. Form Validation.md

Latest commit

 

History

History
220 lines (195 loc) · 5.58 KB

6. Form Validation.md

File metadata and controls

220 lines (195 loc) · 5.58 KB

Form Validation

Session

  1. Hibernate Validator
    • Dependency
    • Example
    • Custome Validation with InitBinding
  2. Parsley Validation
    • Installatioin
    • Automate with Form Validation
    • Custome Color CSS if Error or Success

Hibernate Validator

Dependency

<!-- Add form and hibernate validator -->
<dependency>
    <groupId>javax.validation</groupId>
    <artifactId>validation-api</artifactId>
    <version>1.0.0.GA</version>
</dependency>


<!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-validator -->
<dependency>
    <groupId>org.hibernate</groupId>
    <artifactId>hibernate-validator</artifactId>
    <version>4.0.2.GA</version>
</dependency>

Example

  • Pojo
@Entity
@Table(name="MEMBER")
public class Member {
	@Id
	private String id;
	@NotNull
	@Size(min=3, max=20)
	private String name;
	@Email
	private String email;
	private String address;
	private String noCreditCard;
	private String noHandphone;
  • Spring Controller
@Controller
@RequestMapping("/member")
public class MemberController {

	@ModelAttribute("memberForm")
	public Member getMemberForm(){
		return new Member();
	}
	
	//do save
	@RequestMapping(value="/dosave", method=RequestMethod.POST)
	public String save(@Valid @ModelAttribute("memberForm") Member member, BindingResult bindingResult, Model model){

		
		System.out.println("name : "+ member.getName());
		if(bindingResult.hasErrors()){
			return "form-member";
		}
		
		return "redirect:/member";
	}
  • HTML FORM
<form:form action="/member/dosave" commandName="memberForm" method="POST">
	<%-- <form:errors path="*" cssClass="errorblock" element="div"/> --%>
	<div class="form-group">
		<label for="name">Name</label>
		<form:input type="text" path="name" class="form-control" id="code" placeholder="Name" />
		 <form:errors style="color: red;" path="name"></form:errors>
	</div>
	<div class="form-group">
		<label for="address">Address</label>
		<form:input type="text" path="address" class="form-control" id="address" placeholder="Address" />
		<form:errors style="color: red;" path="address"></form:errors>
	</div>
	<div class="form-group">
		<label for="noCreditCard">Credit Card Number</label>
		<form:input type="text" path="noCreditCard" class="form-control" id="noCreditCard" placeholder="Credit Card Number" />
		<form:errors style="color: red;" path="noCreditCard"></form:errors>
	</div>
	<div class="form-group">
		<label for="email">No Handphone</label>
		<form:input path="email" type="text" class="form-control" id="email" placeholder="Email Address" />
		<form:errors style="color: red;" path="email"></form:errors>
	</div>
	<div class="form-group">
		<label for="noHandphone">No Handphone</label>
		<form:input path="noHandphone" type="text" class="form-control" id="noHandphone" placeholder="Nomer Handphone" />
		<form:errors style="color: red;" path="noHandphone"></form:errors>
	</div>
	<input type="submit" id="add-book" class="btn btn-sm btn-primary" value="Add" />		
</form:form>

Custome Validation with InitBinding

Java Class Extends Validator

import org.springframework.validation.Validator;
public class EmployeeValidation implements Validator{
	@Override
	public boolean supports(Class<?> clazz) {
		// TODO Auto-generated method stub
		return Employee.class.isAssignableFrom(clazz);
	}
	@Override
	public void validate(Object target, Errors errors) {
		// TODO Auto-generated method stub
		Employee employee = (Employee) target;
		ValidationUtils.rejectIfEmptyOrWhitespace(errors, "name", "","Username is empty");	
	}
}

Java Controller

@InitBinder
public void initBinder(WebDataBinder webDataBinder) {
	webDataBinder.addValidators(new EmployeeValidation());
}

Parsley Validation

Installation

original site and download see : http://parsleyjs.org/doc/download.html

Automate with Form Validation

HTML :

<form id="theForm">
	<div class="form-group">
		<label for="code">Code</label>
		<input data-parsley-required="true" type="text" name="code" class="form-control" id="code" placeholder="Code">
	</div>
	<div class="form-group">
		<label for="title">Title</label>
		<input data-parsley-required="true" type="text" name="title" class="form-control datavalid" id="title" placeholder="Title">
	</div>
</form>

Javascript :

validate = $('#theForm').parsley();
validate.validate();
if(validate.isValid()){
	//do next code..
}

Without Form validation

HTML:

<div class="form-group">
	<label for="code">Code</label>
	<input data-parsley-required="true" type="text" name="code" class="form-control" id="code" placeholder="Code">
</div>
<div class="form-group">
	<label for="title">Title</label>
	<input data-parsley-required="true" type="text" name="title" class="form-control datavalid" id="title" placeholder="Title">
</div>

Javascript :

  • Create global Function :
function getValid(validate){
	validate.validate();	
	return validate.isValid();
}
  • Used Parsley :
oCode = $('#code').parsley({
	required : true,
	requiredMessage : ' Code cannot be empty !!',
	minlengthMessage: ' must more than 5 character',
	typeMessage: ' must be email character',
	minlength: 5,
	type:"email"
});

oTitle = $('#title').parsley();
oIsbn = $('#isbn').parsley();

var valid = getValid(oCode);
valid = valid && getValid(oTitle);
valid = valid && getValid(oIsbn);

if(!valid)
	return false;
else
	//do code here

Custome Color CSS if Error or Success

input.parsley-error
{
	color: #B94A48 !important;
	background-color: #F2DEDE !important;
	border: 1px solid #EED3D7 !important;
}

Contact Email

[email protected]