Improvements in register form validation
This commit is contained in:
parent
06dd3a620d
commit
eb198d97ba
@ -17,6 +17,9 @@
|
||||
<link rel="stylesheet" href="lib/jquery/jquery-ui.css">
|
||||
<script type="text/javascript" src="lib/fullcalendar/lib/jquery-ui.min.js"></script>
|
||||
|
||||
<!-- Moment.js -->
|
||||
<script type="text/javascript" src="lib/fullcalendar/lib/moment.min.js"></script>
|
||||
|
||||
<!-- Jquery validate -->
|
||||
<script src="lib/jquery/jquery-validation/dist/jquery.validate.min.js"></script>
|
||||
<script src="lib/jquery/jquery-validation/dist/additional-methods.min.js"></script>
|
||||
|
||||
@ -2,6 +2,7 @@ $().ready(function(){
|
||||
$("#statusmsg").hide();
|
||||
|
||||
$("#txtbda,#txteda").datepicker({
|
||||
|
||||
minDate:new Date(2018,7,23),
|
||||
maxDate:new Date(2018,7,27)
|
||||
});
|
||||
@ -37,10 +38,13 @@ $().ready(function(){
|
||||
required: true,
|
||||
email: true
|
||||
},
|
||||
invited:{required:true},
|
||||
financiacion:"required",
|
||||
letterinvited:"required",
|
||||
|
||||
|
||||
},
|
||||
mesagges: {
|
||||
messages: {
|
||||
nombre: {
|
||||
required: "Please enter your firstname",
|
||||
minlength: "Your firstname must be at least 2 characters long"
|
||||
@ -50,33 +54,77 @@ $().ready(function(){
|
||||
minlength: "Your lastname must be at least 2 characters long"
|
||||
},
|
||||
email: "Please enter a valid e-mail address",
|
||||
invited: "Select one option please",
|
||||
financiacion: "Select one option please",
|
||||
letterinvited: "Select one option please"
|
||||
|
||||
|
||||
|
||||
},
|
||||
errorElement: "em",
|
||||
errorPlacement: function ( error, element ) {
|
||||
// Add the `help-block` class to the error element
|
||||
error.addClass( "help-block" );
|
||||
element.parents(".col-sm-8").addClass("has-feedback");
|
||||
if ( element.prop( "type" ) === "checkbox" ) {
|
||||
error.insertAfter( element.parent( "label" ) );
|
||||
|
||||
element.parents(".input-container").addClass("has-feedback");
|
||||
var esradio = element.prop("type") == "radio";
|
||||
var pariente;
|
||||
if ( esradio ) {
|
||||
pariente = element.parents(".form-group").children(".radioerror");
|
||||
|
||||
pariente.append(error);
|
||||
//element.parents(".form-group").children(".radioerror").append(error);
|
||||
//element.parents(".radios").append(error);
|
||||
|
||||
} else {
|
||||
error.addClass( "help-block" );
|
||||
error.insertAfter( element );
|
||||
}
|
||||
if ( !element.next( "span" )[ 0 ] ) {
|
||||
if ( !element.next( "span" )[ 0 ] && !esradio )
|
||||
$( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
|
||||
}
|
||||
if(esradio)
|
||||
element.parents(".form-group").children(".radioerror").prepend("<span class='glyphicon glyphicon-remove'></span>");
|
||||
|
||||
},
|
||||
success: function(label,element){
|
||||
if ( !$( element ).next( "span" )[ 0 ] ) {
|
||||
var esradio = $(element).prop("type") == "radio";
|
||||
var pariente;
|
||||
if ( esradio ) {
|
||||
pariente = $(element).parents(".form-group").children(".radioerror");
|
||||
if (!$(pariente).children("span")[ 0 ])
|
||||
pariente.preprend("<span class='glyphicon glyphicon-ok form-control-feedback'></span>");
|
||||
}
|
||||
else if ( !$( element ).next( "span" )[ 0 ]){
|
||||
$( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
|
||||
}
|
||||
|
||||
|
||||
|
||||
},
|
||||
highlight: function ( element, errorClass, validClass ) {
|
||||
$( element ).parents( ".col-sm-8" ).addClass( "has-error" ).removeClass( "has-success" );
|
||||
var esradio = $(element).prop("type") == "radio";
|
||||
var pariente;
|
||||
if ( esradio ) {
|
||||
pariente = $(element).parents(".form-group").children(".radioerror");
|
||||
pariente.addClass("has-error").removeClass("has-success");
|
||||
pariente.children( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
|
||||
}
|
||||
else
|
||||
$( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
|
||||
$( element ).parents( ".input-container" ).addClass( "has-error" ).removeClass( "has-success" );
|
||||
|
||||
},
|
||||
unhighlight: function (element, errorClass, validClass) {
|
||||
$( element ).parents( ".col-sm-8" ).addClass( "has-success" ).removeClass( "has-error" );
|
||||
var esradio = $(element).prop("type") == "radio";
|
||||
var pariente;
|
||||
if ( esradio ) {
|
||||
pariente = $(element).parents(".form-group").children(".radioerror");
|
||||
pariente.addClass("has-success").removeClass("has-error");
|
||||
pariente.children( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
|
||||
}
|
||||
else
|
||||
$( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
|
||||
$( element ).parents( ".input-container" ).addClass( "has-success" ).removeClass( "has-error" );
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -10,21 +10,21 @@
|
||||
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-2" for="nombre">First Name</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="col-sm-8 input-container">
|
||||
<input id="nombre" class="form-control" name="nombre" type="text">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-2" for="apellido">Last Name</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="col-sm-8 input-container">
|
||||
<input id="apellido" class="form-control" name="apellido" type="text">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-2" for="titulo">Title</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="col-sm-8 input-container">
|
||||
<input id="titulo" class="form-control" name="titulo"
|
||||
placeholder="Professor, Post Doc, Grad Student(1st year, 2nd year, etc..)" type="text">
|
||||
</div>
|
||||
@ -32,7 +32,7 @@
|
||||
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-2" for="afiliacion">Affiliation</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="col-sm-8 input-container">
|
||||
<input id="afiliacion" class="form-control" name="afiliciacion"
|
||||
placeholder="Which university or organization" type="text">
|
||||
</div>
|
||||
@ -40,14 +40,14 @@
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label" for="ciudad">City</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="col-sm-8 input-container">
|
||||
<input id="ciudad" name="ciudad" class="form-control" type="text">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label" for="pais">Country</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="col-sm-8 input-container">
|
||||
<select id="pais">
|
||||
<option></optoon>
|
||||
</select>
|
||||
@ -57,7 +57,7 @@
|
||||
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-2" for="email">Email</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="col-sm-8 input-container">
|
||||
<input id="email" class="form-control" name="email"
|
||||
placeholder="mail@example.com" type="email">
|
||||
</div>
|
||||
@ -65,13 +65,13 @@
|
||||
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-2" for="txtbda">Beginning date attending</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="col-sm-8 input-container">
|
||||
<input id="txtbda" class="form-control" placeholder="DD/MM/AAAA" name="bda">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-2" for="txteda">Ending date attending</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="col-sm-8 input-container">
|
||||
<input id="txteda" class="form-control" placeholder="DD/MM/AAAA" name="eda">
|
||||
</div>
|
||||
</div>
|
||||
@ -80,7 +80,7 @@
|
||||
<label class="control-label col-sm-2" for="sifinan">
|
||||
Are you asking for support from the conference?
|
||||
</label>
|
||||
<div class="col-sm-1">
|
||||
<div class="col-sm-1 radios input-container">
|
||||
<label class="radio-inline"><input id="sifinan" type="radio" name="financiacion" value="si">Yes</label><br>
|
||||
<label class="radio-inline"><input id="nofinan" type="radio" name="financiacion" value="no">No</label>
|
||||
</div>
|
||||
@ -91,31 +91,48 @@
|
||||
for a shared room, but we cannot make a guarantee at this time
|
||||
</em>
|
||||
</div>
|
||||
<div class="col-sm-7 col-sm-offset-2 radioerror">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<!--requerido-->
|
||||
<label class="control-label col-sm-2" for="invited">
|
||||
Were you invited to participate in this conference?
|
||||
</label>
|
||||
<div class="col-sm-4">
|
||||
<label class="radio-inline"><input id="sifinan" type="radio" name="invited" value="si">Yes, I was previously invited</label><br/>
|
||||
<label class="radio-inline"><input id="nofinan" type="radio" name="invited" value="no">No, I am applying(Registration committee will notifiy you if accepted)</label>
|
||||
<div class="col-sm-4 input-container">
|
||||
<div class="radio">
|
||||
<label><input id="invited" type="radio" name="invited" value="si">Yes, I was previously invited</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label><input id="noinvited" type="radio" name="invited" value="no">No, I am applying(Registration committee will notifiy you if accepted)</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-7 col-sm-offset-2 radioerror">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-2" for="invited">
|
||||
Do you need a letter of invitation?
|
||||
</label>
|
||||
<div class="col-sm-4">
|
||||
<div class="col-sm-4 input-container">
|
||||
<label class="radio-inline"><input id="sifinan" type="radio" name="letterinvited" value="si">Yes</label>
|
||||
<label class="radio-inline"><input id="nofinan" type="radio" name="letterinvited" value="no">No</label>
|
||||
</div>
|
||||
<div class="col-sm-7 col-sm-offset-2 radioerror">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<!-- es requerido -->
|
||||
<label class="control-label col-sm-2" for="roomtype">Rooming Preference</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="col-sm-8 input-container">
|
||||
<select id="roomtype">
|
||||
<option></optoon>
|
||||
</select>
|
||||
@ -124,7 +141,7 @@
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label" for="roomate">Name of preferred roommate (if any)</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="col-sm-8 input-container">
|
||||
|
||||
<input id="roomate" name="roomate" class="form-control"
|
||||
type="text">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user