I am using Twitter Bootstrap v3.3.4 to create a modal login form. I want to use the validate.js plugin for jQuery to validate the form before I send the data via AJAX. However, even with writing minimal script using the plugin, I am not getting any error from the validation.
Please find below the HTML markup along with the validate.js (version 1.13.1) script. Thanks in advance.
$(document).ready(function(){
$("#loginButton").on("click",function(){
//alert("logining in....");
//jQuery Validate Plugin: http://jqueryvalidation.org/ - 24/05/2015
$("#loginModal").validate({
rules:{
username:{
required:true,
minlength:6
},
password:{
required:true,
minlength:6
}
}
});
});
});
<div class="modal" id="loginModal" role="dialog" aria-labelledby="loginModalWindowLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="loginModalWindowLabel">Sign In</h4>
</div>
<div class="modal-body">
<form onsubmit="return false;" id="loginForm">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label" for="username">Username</label>
<input class="form-control" id="username" name="username">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label" for="password">Password</label>
<input class="form-control" id="password" name="password">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<button type="button" id="loginButton" class="bbcModalbutton pull-right">Login</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
Unable to access your account?
</div>
</div>
<div class="row">
<div class="col-md-12">
Don't have an account? Register FREE
</div>
</div>
</form>
</div>
</div>
</div>
</div>
strong text
because your login modal is not in the DOM yet, its a future element, you need to trigger is on a different syntax:
$(document).on("click", '#loginButton', function(){
//your code
}
Here is a fiddle demonstrating the effect
After about half an hour of going back and forward, I finally solved it. If you look at my original post, you will see that I had the login button as type "Button". For some reason, when I changed it to type submit and it worked. I don't understand why but it works.
Thanks Mark for your help!
First, the plugin automatically captures the click event of a type="submit" button or input. Nothing happens when the type attribute is not set to submit.
Secondly, you don't need to put .validate() inside of a click handler because the .validate() method is only used to initialize the plugin. Then after initialization, the click event of the submit button is captured automatically. (Nor do you need an inline onsubmit event handler.)
$(document).ready(function() {
$("#loginModal").validate({ // <-- initialize plugin
// rules & options
....
The id of your form, LoginForm does not match the selector you attached to .validate(), #loginModal.
Fixing all of that...
Working DEMO: http://jsfiddle.net/654o4wgd/
Related
I want to have a condition where when a user clicks a link to download a file it will ask for a password after which the file can be downloaded(if it is right). I am pretty basic in JS and I want to try this for my Flask app deployed at Heroku. I just don't know how to implement it.
So this is what I have come up with so far:
<main class="page projects-page">
<section class="portfolio-block projects-cards">
<div class="container">
<div class="heading">
<h2>Test download</h2>
</div>
<div class="row">
<div class="col-md-6 col-lg-4">
<div class="card border-0"></div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card border-0">
<div class="card-body">
<h6>To download the file enter the SECRET_KEY</h6><input type="password"></div>
</div><button class="btn btn-primary d-block float-none" type="submit" style="width: 349.984px;">DOWNLOAD </button></div>
<div class="col-md-6 col-lg-4">
<div class="card border-0"></div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card border-0">
<div class="card-body"></div>
</div>
</div>
</div>
</div>
</section>
</main>
This is the part of the code where the user types the password and if correct the file should be downloaded. Can this be done with a simple JS function where the password field and button are enclosed in a form element and compared or should I use another method?
So, when a link is clicked you can generate a modal asking for the password, when the password is entered and submitted, you send both the password and which link is being requested to the API and it initiates the download if the link is correct.
Here's a simple modal:
<div class="modal-container" id="modal">
<div class="modal">
<button class="close-btn" id="close"></button>
<div class="modal-header">
<h3>Password needed to access file </h3>
<div class="modal-content">
<form class="modal-form">
<div>
<label for="password">Password</label>
<input
type="password"
id="password"
placeholder="Enter Password"
class="form-input"
/>
</div>
<input type="submit" value="Submit" class="submit-btn" />
</form>
</div>
</div>
</div>
</div>
now you can add an event listener on the link items so that when the link is clicked, this modal appears and the user is prompted to enter a password.
I handle the modal appearing and disappearing in css, you can see my css at
https://github.com/Daniel-Wh/BurgerAndModal
I'm assuming that you already have experience with event listeners and making API calls since it sounds like someone can click a link and download something from your app.
Without seeing your code, there's not much else I can say. Good luck out there
I have written a code to show popup using a bootstrap modal.
It worked, but all element is blocked. I don't know what wrong with my code.
Here is my code:
<div id="add_data_Modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add data</h4>
</div>
<div class="modal-body">
<form method="post" name="insert_form" id="insert_form">
<label>Số thuê bao</label>
<input type="text" name="name" id="name" class="form-control" />
<br />
<label>Speed number</label>
<input type="text" name="spd_number" id="spd_number" class="form-control" />
<br />
<label>Dial number</label>
<input type="text" name="dial_number" id="dial_number" class="form-control"/>
<br />
<input type="submit" name="insert" id="insert" value="ADD" class="btn btn-success"/>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You can solve your issue,following this link.
bootstrap modal examples
As if have different css files,check that css files also.because some times you added classes or ID can be override.
Please check your code, I think the cause may be due to your code redundant or missing a close tag. Usually missing or excess div tags.
Bootstrap document indicate: Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements.You’ll likely run into issues when nesting a .modal within another fixed element.
If you realy can't find error, don't know whether parent container of id="add_data_Modal" against the Bootstrap's rules. Try below code:
$('#add_data_Modal').appendTo('body');
Using jquery to place your modal HTML to body. In case you can sure your modal HTML in a top-level position.
Update--------
If someone using Angular this works - sort of. But... this has a nasty side effect as well: Because Angular re-renders the view every time it's accessed, a new #add_data_Modal element is created each and everytime.
This behavior causes duplication of the the elements and on occasion causes the wrong data to come up.
Fix this by clearing out the modal before append to body like below:
$('#"body>#add_data_Modal').remove();
$('#add_data_Modal').appendTo('body');
I am trying to make a Javascript JQuery registration form pop-up on link click.
So I have this button:
REGISTER NOW
And I`m trying to make it pop-up a small simple html registration form that I can store in a hidden registration DIV. Example:
<div name="reg" style="visibility:hidden;">reg form</div>
I just need the simple registration form (Only full name and email) to pop-up (centered and mobile responsive) when that button is linked.
Can I get any help in doing this? Thank you.
I have tried with jquery dialog and almost everything found on Google, but it doesn't seem to work.
Thanks.
As suggested by Mihailo, you could use Bootstrap Modals to make it responsive (mobile, tablet and PC).
<a data-toggle="modal" data-target=".bs-example-modal-sm" role="button" class="">Launch demo modal</a>
<div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Registration</h4>
</div>
<div class="modal-body">
<form name="reg-form">
<div class="form-group">
<label for="user-name" class="control-label">Full Name:</label>
<input type="text" class="form-control" id="user-name">
</div>
<div class="form-group">
<label for="email" class="control-label">Email Address:</label>
<input type="text" class="form-control" id="email">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Here is the thing, there is a modal template with header section, body section and footer section.
div class="modal fade bs-example-modal-sm"
If you remove fade, then the modal will not animate.
More information regarding bootstrap modals is here
Also, Please find the corresponding JsFiddle below:
https://jsfiddle.net/Manoj85/7egtc2ne/5/
Hope this helps!!
You should really be using a class or id on you register div instead, but you can show the form like this:
$('.cta').click(function() {
$('div[name="reg"]').css('visibility', 'visible');
})
Once you give your div a proper class/id, you can replace div[name="reg"] with .class or #id. Additionally, jQuery has several built-in functions for hiding and showing elements. To use these, you'll want to change visibility:hidden; with display:none;. Then, in the code I presented above, replace .css(...) with one of the following:
.show() is an immediate effect, and is the same as changing the display property to block. To remove again, use .hide().
.fadeIn(), as the name suggests, is more of a gradual fading effect. Opposite of .fadeOut().
slideDown() is similar to an "accordian" effect, where the element starts at 0 height and "grows". Opposite of .slideUp().
You can also use .toggle(), .fadeToggle(), or slideToggle(), respectively to alternate between showing and hiding the elements.
I've created this JSFiddle to demonstrate these effects.
Assuming you have a div called register, which you need to add, it will be like this:
<script>
$(".cta").click(function() {
$("#register").css("hidden", false)
})
</script>
I have used jquery virtual keyboard for bootstrap modal box field. And I want to display keyboard after the text field in modal box after focus on text field.
JQuery code is
$('#test').keyboard({ layout: 'qwerty', usePreview: false,position: {
// null = attach to input/textarea;
// use $(sel) to attach elsewhere
of: $('#teste'),
my: 'center top',
at: 'center top',
// used when "usePreview" is false
at2: 'center bottom'
} });
Bootstrap modalbox code is:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Contact Information</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="test" class="col-sm-2 control-label">Email</label>
<div class="col-sm-6">
<input type="email" class="form-control" id="test" placeholder="test" autocomplete="off">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" id="save" >Send</button>
</div>
</div></form>
Here is the demo url http://jsfiddle.net/5Lww1wgm/3/
May be position is absolute so it is not displaying keyboard properly.
Thanks,
Your fiddle link is missing jQuery ui, I suggest that you may be missing these in your project because when I added them to your fiddle it started working in the correct manner after also changing the initialization code to remove the position variables so it looks like so
$('#test').keyboard({ layout: 'qwerty', usePreview: false});
hope this fixes your issue
Edit 1:
Here is a working fiddle: http://jsfiddle.net/jjr2000/88zg4n3e/1/
thanks for asking on Stack Overflow.
Apologies for not commenting, but I don't have enough reputation.
I can't tell as this jsfiddle playground doesn't include all your bootstrap layout, however, it looks like it's been dynamically positioned. This is both a bad solution and ugly.
If possible (I haven't used the jQuery virtual keyboard before), I would suggest you follow these steps:
create an empty invisible div above or below the textbox
On loadup Inject the JQuery keybaord into this div
On textbox focus, make this div visible. On LoseFocus, make it invisible.
Hope this helps
I've below bootstrap modal. I'm just showing only 2 fields here. But I've more than 10 fields which are all mandatory. I'm doing javascript validation on click of Add button in Add_click(); and alerting user that All fields are mandatory. After click on Alert, the Modal window just goes off. I need this window to be retained until user gives all the details.
<div id="modalUserAddition" class="modal fade">
<div class="modal-dialog" style="width: 600px">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">User Details</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" id="txtUserName" class="form-control" runat="server" placeholder="User Name" />
</div>
<div class="form-group">
<input type="text" id="txtPassword" class="form-control" runat="server" placeholder="Password" />
</div>
</div>
<div class="modal-footer">
<button type="button" id="Close" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="Add" onclick="Add_click();" class="btn btn-primary" data-dismiss="modal">Add User</button>
</div>
</div>
</div>
</div>
I tried below code, but it didn't work for me.
alert('All fields are mandatory!');
//$('#modalUserAddition').modal('toggle');
$('#modalUserAddition').modal({
show: true
});
Please help!
Remove data-dismiss="modal" from the Add button and close the modal in Add_click where the data is proven valid by adding:
$('#modalUserAddition').modal('hide');
I think you are clicking outside the modal when you click on the alert, and it is closing the modal due to its native behavior. You can use the backdrop option. Passing this option with value static will prevent closing the modal after clicking outside the modal.
<button data-target="#myModal" data-toggle="modal" data-backdrop="static">
Launch demo modal
</button>
Or you can do it via JavaScript
$('#myModal').modal({backdrop: 'static'})
DEMO
Since you're using Bootstrap, perhaps a better alternative would be to use its native alerts.
It would avoid your current issue and be more consistent.
It worked for me putting data-backdrop="static" in the button and return false; when returned the validations results.