I am using the JQuery Validation plugin for a form. It works perfectly for Chrome, however, it does not work at all for Safari. I am not sure why this would be the case. Any suggestions?
Here is my code:
<form class="form-horizontal" id="contact-form" action="index.php" method="post">
<?php if ($good_input){ ?>
<div class="alert alert-success">
<a class="close" data-dismiss="alert" href="#">×</a>
Thank you for contacting us! We will get back to you as soon as possible.
</div>
<?php } ?>
<div class="control-group">
<label class="control-label" for="name">Name*</label>
<div class="controls">
<input type="text" name="name" placeholder="Name" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="comments">Comments*</label>
<div class="controls">
<textarea rows="5" name="comments" required></textarea>
</div>
</div>
<div class="btn-submit">
<button type="submit" id="submit" class="btn btn-block btn-lg btn-success">Submit</button>
</div>
</form>
And my jQUERY validation code:
<script>
$().ready(function() {
$("#contact-form").validate();
});
</script>
Make sure that the Validate plugin follows the jQuery JavaScript in your code.
Its because Safari does not support HTML5 Forms Validation like the other web browsers do, for some reason the developers do not see the greatness of HTML5 and how it makes submitting forms so much easier then having to work out functions to check and see if the browser is Safari, so has of right now I think it is because Safari does not support HTML5 Forms or I can't find it any way because I was/having the same problem.
Related
I would like assistance with code to put in elementor modal pop up box to show" Subscription Confirmed" confirmation that they have subscribed to newsletter here is the code I'm going to use for collecting emails its from the newsletter plugin:
<div class="tnp tnp-subscription"><form action="https://example.com/?na=s" method="post"><input
name="nlang" type="hidden" value="" />
<h1 style="text-align: center;"></h1>
<h3>Subscribe to get 20% off your first</h3>
<h3></h3>
<h3>order with mysite</h3>
<h3></h3>
<div class="tnp-field tnp-field-email"><label></label><input class="tnp-email" name="ne"
required="" type="email" /></div>
<div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit"
value="Subscribe" /></div>
</form></div>
Thanks any help would be appreiated
You could use alert();
alert("Subscription confirmed!");
If that doesn't suit your likings, then I recommend seeing this, and you could customize the css of the box however you want.
I am working on a pretty web application that connects to a RESTful API. My HTML has a "View Employees" button that when clicked, makes an API call to grab all the employees for that company. I am checking the return for the API, and it's getting the entire list, but the page is only rendering the first employee and then blank spaces for the rest. Things get stranger when I go to a different company and click on their View Employees button, because the employees for that company appear, AND one of the blank spaces in the previous company suddenly renders properly. I'm reading the return from the API, and it has all the information I need in a properly formatted way. I'm really confused.
Anyone have any idea what's going on? Here's my HTML. If you need more code please let me know.
<div ng-if="sigFigCtrl.companies[$index].employees.length > 0">
<div class="employee-box" ng-repeat="employee in sigFigCtrl.companies[$index].employees">
<span class="glyphicon glyphicon-edit pull-right" ng-click="sigFigCtrl.toggleEmployeeEdit($index)"></span>
<span class="glyphicon glyphicon-remove pull-right" ng-click="sigFigCtrl.deletePerson(employee._id, $index, sigFigCtrl.companies[$parent.$index].employees)"></span>
<div ng-if="!sigFigCtrl.companies[$index].editEmployee">
<div ng-if="sigFigCtrl.companies[$index].employees.length > 0">
<p><b>Name:</b> {{employee.name}}</p>
<p><b>Email:</b> {{employee.email}}</p>
</div>
</div>
<div ng-if="sigFigCtrl.companies[$index].editEmployee">
<form name="editPersonForm" ng-submit="sigFigCtrl.editPerson(employee._id, $index)">
<div class="form-group">
<div class="col-md-12">
<input type="text" ng-model="sigFigCtrl.editPersonName" id="name" placeholder="Name of Employee" class="form-control" required></input>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="text" ng-model="sigFigCtrl.editPersonEmail" id="name" placeholder="Email of Employee" class="form-control" required></input>
</div>
<button>SUBMIT</button>
</form>
</div>
</div>
</div>
</div>
Thank you in advance.
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 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/
I've been having an awful awful time all day trying to get mailchimp in my website.
I have literally copied and pasted the embedded code from the mailchimp website and when I click the subscribe button i'm treated to:
404 Not Found
The requested document was not found on this server. Web Server at
class.travel
I have literally NO idea what is going on. And can't find anything on Google to boot.
Could anyone please point me in the right direction as to why this is happening?
Here's the form I'm using at my website http://class.travel Again, this is just copied and pasted from mailchimp. Is there some sort of API Key or JS files I need to include and it's just not stated on their website????
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//class.us9.list-manage.com/subscribe/post?u=820adca0d3bcdd8bb18d6c2a9&id=9768ebd530" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_820adca0d3bcdd8bb18d6c2a9_9768ebd530" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
Also, P.S. Web Noob, reporting in.
Sorry Future on-lookers. I never figured it out.
But putting it in an iframe made it work, for some godly unknown reason.