sysadm/ggdworkshop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improvements in register form validation

Browse Source
This commit is contained in:
German Correa 2017-11-29 22:30:48 -03:00
parent 06dd3a620d
commit eb198d97ba
3 changed files with 100 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
header.php
View File

@ -17,6 +17,9 @@
<link rel="stylesheet" href="lib/jquery/jquery-ui.css"> <link rel="stylesheet" href="lib/jquery/jquery-ui.css">
<script type="text/javascript" src="lib/fullcalendar/lib/jquery-ui.min.js"></script> <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 --> <!-- Jquery validate -->
<script src="lib/jquery/jquery-validation/dist/jquery.validate.min.js"></script> <script src="lib/jquery/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="lib/jquery/jquery-validation/dist/additional-methods.min.js"></script> <script src="lib/jquery/jquery-validation/dist/additional-methods.min.js"></script>

76
js/registerform.js
View File

@ -1,7 +1,8 @@
$().ready(function(){ $().ready(function(){
$("#statusmsg").hide(); $("#statusmsg").hide();
$("#txtbda,#txteda").datepicker({ $("#txtbda,#txteda").datepicker({
minDate:new Date(2018,7,23), minDate:new Date(2018,7,23),
maxDate:new Date(2018,7,27) maxDate:new Date(2018,7,27)
}); });
@ -37,10 +38,13 @@ $().ready(function(){
required: true, required: true,
email: true email: true
}, },
invited:{required:true},
financiacion:"required",
letterinvited:"required",
}, },
mesagges: { messages: {
nombre: { nombre: {
required: "Please enter your firstname", required: "Please enter your firstname",
minlength: "Your firstname must be at least 2 characters long" 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" minlength: "Your lastname must be at least 2 characters long"
}, },
email: "Please enter a valid e-mail address", 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", errorElement: "em",
errorPlacement: function ( error, element ) { errorPlacement: function ( error, element ) {
// Add the `help-block` class to the error element // Add the `help-block` class to the error element
error.addClass( "help-block" );
element.parents(".col-sm-8").addClass("has-feedback"); element.parents(".input-container").addClass("has-feedback");
if ( element.prop( "type" ) === "checkbox" ) { var esradio = element.prop("type") == "radio";
error.insertAfter( element.parent( "label" ) ); 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 { } else {
error.addClass( "help-block" );
error.insertAfter( element ); 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 ); $( "<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){ success: function(label,element){
if ( !$( element ).next( "span" )[ 0 ] ) { var esradio = $(element).prop("type") == "radio";
$( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) ); 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 ) { highlight: function ( element, errorClass, validClass ) {
$( element ).parents( ".col-sm-8" ).addClass( "has-error" ).removeClass( "has-success" ); var esradio = $(element).prop("type") == "radio";
$( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" ); 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) { unhighlight: function (element, errorClass, validClass) {
$( element ).parents( ".col-sm-8" ).addClass( "has-success" ).removeClass( "has-error" ); var esradio = $(element).prop("type") == "radio";
$( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" ); 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" );
} }
}); });

53
registration.php
View File

@ -10,21 +10,21 @@
<div class="form-group"> <div class="form-group">
<label class="control-label col-sm-2" for="nombre">First Name</label> <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"> <input id="nombre" class="form-control" name="nombre" type="text">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label col-sm-2" for="apellido">Last Name</label> <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"> <input id="apellido" class="form-control" name="apellido" type="text">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label col-sm-2" for="titulo">Title</label> <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" <input id="titulo" class="form-control" name="titulo"
placeholder="Professor, Post Doc, Grad Student(1st year, 2nd year, etc..)" type="text"> placeholder="Professor, Post Doc, Grad Student(1st year, 2nd year, etc..)" type="text">
</div> </div>
@ -32,7 +32,7 @@
<div class="form-group"> <div class="form-group">
<label class="control-label col-sm-2" for="afiliacion">Affiliation</label> <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" <input id="afiliacion" class="form-control" name="afiliciacion"
placeholder="Which university or organization" type="text"> placeholder="Which university or organization" type="text">
</div> </div>
@ -40,14 +40,14 @@
<div class="form-group"> <div class="form-group">
<label class="col-sm-2 control-label" for="ciudad">City</label> <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"> <input id="ciudad" name="ciudad" class="form-control" type="text">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-2 control-label" for="pais">Country</label> <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"> <select id="pais">
<option></optoon> <option></optoon>
</select> </select>
@ -57,7 +57,7 @@
<div class="form-group"> <div class="form-group">
<label class="control-label col-sm-2" for="email">Email</label> <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" <input id="email" class="form-control" name="email"
placeholder="mail@example.com" type="email"> placeholder="mail@example.com" type="email">
</div> </div>
@ -65,13 +65,13 @@
<div class="form-group"> <div class="form-group">
<label class="control-label col-sm-2" for="txtbda">Beginning date attending</label> <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"> <input id="txtbda" class="form-control" placeholder="DD/MM/AAAA" name="bda">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label col-sm-2" for="txteda">Ending date attending</label> <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"> <input id="txteda" class="form-control" placeholder="DD/MM/AAAA" name="eda">
</div> </div>
</div> </div>
@ -80,7 +80,7 @@
<label class="control-label col-sm-2" for="sifinan"> <label class="control-label col-sm-2" for="sifinan">
Are you asking for support from the conference? Are you asking for support from the conference?
</label> </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="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> <label class="radio-inline"><input id="nofinan" type="radio" name="financiacion" value="no">No</label>
</div> </div>
@ -90,32 +90,49 @@
we have submitted funding requests and hope to cover the housing we have submitted funding requests and hope to cover the housing
for a shared room, but we cannot make a guarantee at this time for a shared room, but we cannot make a guarantee at this time
</em> </em>
</div> </div>
<div class="col-sm-7 col-sm-offset-2 radioerror">
</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<!--requerido--> <!--requerido-->
<label class="control-label col-sm-2" for="invited"> <label class="control-label col-sm-2" for="invited">
Were you invited to participate in this conference? Were you invited to participate in this conference?
</label> </label>
<div class="col-sm-4"> <div class="col-sm-4 input-container">
<label class="radio-inline"><input id="sifinan" type="radio" name="invited" value="si">Yes, I was previously invited</label><br/> <div class="radio">
<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> <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> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label col-sm-2" for="invited"> <label class="control-label col-sm-2" for="invited">
Do you need a letter of invitation? Do you need a letter of invitation?
</label> </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="sifinan" type="radio" name="letterinvited" value="si">Yes</label>
<label class="radio-inline"><input id="nofinan" type="radio" name="letterinvited" value="no">No</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> </div>
<div class="form-group"> <div class="form-group">
<!-- es requerido --> <!-- es requerido -->
<label class="control-label col-sm-2" for="roomtype">Rooming Preference</label> <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"> <select id="roomtype">
<option></optoon> <option></optoon>
</select> </select>
@ -124,7 +141,7 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-2 control-label" for="roomate">Name of preferred roommate (if any)</label> <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" <input id="roomate" name="roomate" class="form-control"
type="text"> type="text">