You can customize your own with the use of Custom HTML to add Javascript based front-end validation in a form. Below is an example on how:
- Set the selected field to Mandatory by adding the default validator.
- Drag and drop a Custom HTML and code the following:
<script>
$(document).ready( function(){
$("form").submit(function(event) {
var isValid = true;
var radioValue;
$(".form-cell-validator:visible:contains('*')").each(function(){
// check radio buttons
$(this).parents(".form-cell").find("input:radio").each(function(){
$(this).parents(".form-cell").css("background-color","");
var input = $(this).parents(".form-cell").find("input:radio").attr("name");
radioValue = $("input[name='"+input+"']:checked");
if(radioValue){
if(!radioValue.val()){
$(this).parents(".form-cell").css("background-color","#f8d7da");
isValid = false;
return false;
}
}
});
//check textarea
$(this).parents(".form-cell").find("textarea").each(function(){
//$(this).parents(".form-cell").css("background-color","");
var textarea = $(this).parents(".form-cell").find("textarea").attr("name");
var textareaValue = $(this).parents(".form-cell").find("textarea").val();
if(!textareaValue){
$(this).parents(".form-cell").css("background-color","#f8d7da");
isValid = false;
return false;
}
});
//check select buttons
$(this).parents(".form-cell").find("select").each(function(){
//$(this).parents(".form-cell").css("background-color","");
var select = $(this).parents(".form-cell").find("select").attr("name");
if (!(typeof select === "undefined")) {
var selectValue = $('select[id^='+select+']').find(":selected").text();
if(!selectValue){
$(this).parents(".form-cell").css("background-color","#f8d7da");
isValid = false;
return false;
}
}
});
});
//if invalidated, remove blockui
if(!isValid){
$('#myErrorMsg').fadeIn('fast').delay(1000).fadeOut('fast');
$.unblockUI();
return false;
}else{
return true;
}
return true;
});
})
</script>
<div id="myErrorMsg" class="alert alert-error" role="alert">
Validation Error : Missing Required Value
</div>
<style>
#myErrorMsg{
display:none;
}
</style>