vanzhiganov/clipbucket
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

jQuery form validation with animation

Browse source
This commit is contained in:
Saqib Razzaq 2016-04-04 18:13:06 +05:00
parent ce18ead583
commit 66361a1bd1
2 changed files with 73 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
upload/styles/cb_28/layout/signup.html
View file

@ -146,7 +146,7 @@
</label>
</div>
{ANCHOR place="the_form"}
<input type="submit" name="signup" class="btn btn-success btn-lg btn-block" value="{lang code='Sign up'}">
<input type="submit" name="signup" class="btn btn-success btn-lg btn-block" id="signup_submit" value="{lang code='Sign up'}">
{ANCHOR place='signup_form'}
</form>
{/if}
@ -157,6 +157,7 @@
{/if}
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(document).ready(function(){
jQuery('#dob').datepicker({
showOtherMonths: true,
@ -167,9 +168,76 @@
});
$('.simple_container').addClass('alert-success alert');
});
var errors = {
"empty_name" : "{lang code='usr_uname_err'}",
"name_length" : "{lang code='user_name_invalid_len'}",
"name_invalid_chars" : "{lang code='usr_uname_err3'}",
"pass_mismatch" : "{lang code='usr_pass_err3'}",
"empty_pass" : "{lang code='usr_pass_err2'}",
"empty_email" : "{lang code='usr_email_err1'}" ,
"invalid_email":"{lang code='usr_email_err2'}"
};
function addErrClass(obj, msg) {
$(obj).closest('.form-group').addClass('invalid-error');
$('<span class="help-block">'+msg+"</span>").insertAfter(obj);
$("html, body").animate({ scrollTop: 0 }, "slow");
}
$('#signup_submit').on("click",function(e){
$('span').remove();
$('div').removeClass('invalid-error');
e.preventDefault();
var usernameSect = $('#username'),
username = usernameSect.val(),
emailSect = $('#email'),
email = emailSect.val(),
passwordSect = $('#password'),
password = passwordSect.val(),
cpasswordSect = $('#cpassword'),
cpassword = cpasswordSect.val();
gotNums = username.match(/\d+/g);
var goodToGo = true;
if (username.length == 0) {
addErrClass(usernameSect, errors["empty_name"]);
goodToGo = false;
} else if (username.length < 2 || username.length > 50) {
addErrClass(usernameSect, errors["name_length"]);
goodToGo = false;
}
if (gotNums != null) {
addErrClass(usernameSect, errors["name_invalid_chars"]);
goodToGo = false;
}
if (email.length == 0) {
addErrClass(emailSect, errors["empty_email"]);
goodToGo = false;
} else if (!isValidEmail(email)) {
addErrClass(emailSect, errors["invalid_email"]);
goodToGo = false;
}
if (password.length == 0) {
addErrClass(passwordSect, errors["empty_pass"]);
goodToGo = false;
}
if (password != cpassword) {
addErrClass(cpasswordSect, errors["pass_mismatch"]);
goodToGo = false;
}
if (goodToGo == true) {
$('#signup_form').submit();
}
});
</script>
{literal}
<style>
.ui-datepicker {
background: #fff;
@ -177,5 +245,4 @@
width: 140px;
vertical-align: center;
}
</style>
{/literal}
</style>

4
upload/styles/cb_28/layout/view_channel.html
View file

@ -103,7 +103,7 @@
<div class="tab-pane videos fade in clearfix active" id="user-videos">
<div class="clearfix row user_vids">
{if $uservideos}
<div class="clearfix">
<div id="usr-vids" class="clearfix">
{foreach $uservideos as $video}
<div class="item-video col-lg-4 col-md-4 col-sm-6 col-xs-12">
{include file="$style_dir/blocks/videos/video.html" display_type='homeVideos'}
@ -336,7 +336,7 @@ $('#cover_info').show();
success: function(data) {
$('#more-view-channel').remove();
if (data.length > 1) {
$(data).appendTo('.user_vids').fadeIn('slow');
$(data).appendTo('#usr-vids').fadeIn('slow');
$('<div class="clearfix text-center"><button id="more-view-channel" class="btn btn-loadmore" dataLimit="'+loadLimit+'" dataHit="'+nextHit+'">Load More</button></div>').appendTo('.user_vids').fadeIn('slow');
}