I was trying to submit things using a div, HTML5, JavaScript. If I use a submit button the validator (required attribute in the inputs) works the button doesn't submit info. But if I use a div tag it doesn't validate and send the info. Any way to fix it? Or should I do the whole code to validate the info and stop the submit?
<form action="index.php" method="get" name='myform'>
<ul>
<li class="row">
<label class="labels" for="username">Username</label>
<input type="text" id="txtUser" required>
</li>
<li class="row">
<label class="labels" for="password">Password</label>
<input type="password" id="txtPass" required>
</li>
<li id="row2">
<div class="button">Submit</div>
<input type="submit">
</li>
</ul>
</form>
http://www.dropmocks.com/mCyfGJ
Im using the following code.
Javascript submit:
http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml
HTML
enter code here
If you are submitting via JS then you need to call the form validation yourself. I don't see any issues in your post that would prevent the submit though (without validation). But here's a working example. Keep in mind that not all browsers support html5 validation.
function submitform() {
// Get first form element
var $form = $('form')[0];
// Check if valid using HTML5 checkValidity() builtin function
if ($form.checkValidity()) {
console.log('valid');
$form.submit();
}
else {
console.log('not valid');
}
return false
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="index.php" method="get" name='myform'>
<ul>
<li class="row">
<label class="labels" for="username">Username</label>
<input type="text" id="txtUser" name="sds" required>
</li>
<li class="row">
<label class="labels" for="password">Password</label>
<input type="password" id="txtPass" required>
</li>
<li id="row2">
<div class="button">Submit</div>
<input type="submit">
</li>
</ul>
</form>
I had a similiar problem and solved it this way.
<input type="submit" id="Guardar" name="Guardar" value="Guardar" onClick="if(this.form.checkValidity()){this.form.submit(); this.disabled=true; this.value='Enviando…';}else{this.form.checkValidity();}">
You can use a function to not handle it on element.
Related
I need to display jquery popup only once with a function onload. This is my popup with a window.onload function delay and to addclass is-visible, however I'm looking to add a cookie function so the popup will only load once per browser or cache.
Any suggestions would be fantastic! - J query & html in code
jQuery(document).ready(function($){
window.onload = function (){
jQuery(".bts-popup").delay(1000).addClass('is-visible');
}
//open popup
jQuery('.bts-popup-trigger').on('click', function(event){
event.preventDefault();
jQuery('.bts-popup').addClass('is-visible');
});
//close popup
jQuery('.bts-popup').on('click', function(event){
if( jQuery(event.target).is('.bts-popup-close') || jQuery(event.target).is('.bts-popup') ) {
event.preventDefault();
jQuery(this).removeClass('is-visible');
}
});
//close popup when clicking the esc keyboard button
jQuery(document).keyup(function(event){
if(event.which=='27'){
jQuery('.bts-popup').removeClass('is-visible');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bts-popup" role="alert">
<div class="bts-popup-container">
<div id="contact-form">
<form method="post" action="">
<input type="hidden" name="form_uid" value="e880e632-8e7c-4b51-8928-b63cd1b6cdb5">
<ul>
<li class="namefield">
<input name="name" type="text" class="name" placeholder="Your Name">
</li>
<li class="emailfield">
<input name="submit_by" type="text" class="email-contact" placeholder="Your Email">
</li>
<li class="telfield">
<input name="telephone" type="text" class="phone" placeholder="Contact Number">
</li>
<li class="commentsfield">
<textarea name="comments" class="query" placeholder="How Can We Help?"></textarea>
</li>
<li>
</li>
<li>
<input name="submit-button" type="submit" value="Submit" class="submit">
<p class="gdpr-small">*By clicking ‘submit’ you are consenting to us replying, and storing your details. (see our privacy policy).</p>
</li>
</ul>
<input type="hidden" name="required" value="name,submit_by,telephone,comments">
<input type="hidden" name="data_order" value="name,submit_by,telephone,comments,marketing-opt-in">
<input type="HIDDEN" name="automessage" value="mymessage">
<input name="ok_url" type="hidden" value="">
<input name="not_ok_url" type="hidden" value="">
</form>
</div>
<i class="fa fa-times-circle"></i>
</div>
</div>
How to simple manage cookies, i think you can watch here: link
I think it's pretty simple (pseudo-code):
if (getCookie("popup") doesnt exist OR is set to 0)
showPopup();
setCookie("popup",1);
else
destroyPopup();
endif
You can use this simple way to handle multiple popoups too.
If you use PHP, you can use $_COOKIE instead of a javascript function.
Hope it helps.
I'm having problems simulating a click via javascript on a mailchimp pop-up subscribe form and i need your help.
<!-- Title & Description - Holds HTML from CK editor -->
<div class="content__titleDescription" data-dojo-attach-point="descriptionContainer"><strong>Unlock the content </strong>by subscribing to our page.</div>
<!-- Form Fields -->
<form action="//mc.us7.list-manage.com/subscribe/form-post?u=bcd9828fa83ea7a231ffbee26&id=1928481ac4" accept-charset="UTF-8" method="post" enctype="multipart/form-data" data-dojo-attach-point="formNode" novalidate="">
<div class="content__formFields" data-dojo-attach-point="formFieldsContainer">
<div class="field-wrapper" id="uniqName_3_0" widgetid="uniqName_3_0">
<label for="mc-EMAIL">Email Address</label>
<input type="text" name="EMAIL" value="" id="mc-EMAIL" class="invalid">
<div class="invalid-error" style="display: block;">This field is required.</div>
</div>
<div class="field-wrapper" id="uniqName_3_1" widgetid="uniqName_3_1">
<label for="mc-FNAME">First Name</label>
<input type="text" name="FNAME" value="" id="mc-FNAME" class="valid">
<div class="invalid-error" style="display: none;"></div>
</div>
<div style="position:absolute;left:-5000px;">
<input type="text" name="b_bcd9828fa83ea7a231ffbee26_1928481ac4" tabindex="-1" value="">
</div>
</div>
<div class="content__button">
<input class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
</div>
</form>
<!-- Footer - Holds HTML from CK editor -->
<div class="content__footer" data-dojo-attach-point="footerContainer"></div>
</div>
<div class="modalContent__image" data-dojo-attach-point="formImageContainer"></div>
The code that i'm trying to target is:
<input class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
It's the submit button "Subscribe" that you can also see in
http://www.aspeagro.com/EN_Program_Abricot.html
Thank you!
How about this? I think is should do what you're after?
HTML
<input id="submit-button" class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
JS
$('#submit-button').on('click', function(e){
e.preventDefault();
// Do what you want to do
});
set id="btn" attribute to your submitting button and using jQuery you can trigger click with $("#btn").click(); call
If your aim is to submit the form, then don't bother sending a click event, but use the form's submit method:
var form = document.getElementById('uniqName_3_0').parentNode.parentNode;
form.submit();
The code is of course easier if you give the form an id attribute:
<form id="myform" ...
and then:
document.getElementById('myform').submit();
That button is inside an iframe. To access it from the parent page you would trigger it like this:
$('iframe').contents().find('input:submit').click()
I have read the parsley.js docs but I am still learning JQuery so it goes in one ear and out the other.
I think I need to add a custom event listener to achieve what I need, but I am really not sure, so some help would be appreciated.
I have a form with parsley.js embedded. The form works as expected but I have to add some functionality to the form.
How would I display an alert message (alert('no client side errors!');) to the user when all the client side errors have been cleared or when there are no client side errors when the form is submitted?
Here is an example of my form code:
<form id="name_details_form" class="form-horizontal" method="post" data-parsley-validate>
<div id="row_id_name_details_first_name" class="control-group">
<label for="id_name_details_first_name" class="control-label required">First Names:</label>
<div class="controls">
<input data-parsley-required="true" data-parsley-maxlength="200" data-parsley-required-message="This field is required." maxlength="200" type="text" id="id_name_details_first_name" name="name_details_first_name" class="input-xxlarge parsley-error" data-parsley-id="8581" dir="ltr"><span class="parsley-errors-list filled" id="parsley-id-8581" style="display: none;"><span class="parsley-required">This field is required.</span></span>
</div>
</div>
<div id="row_id_name_details_middle_name" class="control-group">
<label for="id_name_details_middle_name" class="control-label ">Middle Names:</label>
<div class="controls">
<input id="id_name_details_middle_name" type="text" name="name_details_middle_name" data-parsley-maxlength="200" maxlength="200" class="input-xlarge" data-parsley-id="7500"><span class="parsley-errors-list" id="parsley-id-7500" style="display: none;"></span>
</div>
</div>
<div id="row_id_name_details_last_name" class="control-group ">
<label for="id_name_details_last_name" class="control-label required">Last Names:</label>
<div class="controls">
<input data-parsley-required="true" data-parsley-maxlength="200" data-parsley-required-message="This field is required." maxlength="200" type="text" id="id_name_details_last_name" name="name_details_last_name" class="input-xxlarge parsley-success" data-parsley-id="7577" dir="ltr"><span class="parsley-errors-list" id="parsley-id-7577" style="display: none;"></span>
</div>
</div>
<hr />
<input class="btn-u btn-u-blue" type="submit" value="Add">
</form>
<script>
....
</script>
This code shows the alert message when the form is submitted and the all fields are valid.
<script>
$(document).ready(function() {
// bind parsley to the form
$("#name_details_form").parsley();
// on form submit
$("#name_details_form").on('submit', function(event) {
// validate form with parsley.
$(this).parsley().validate();
// if this form is valid
if ($(this).parsley().isValid()) {
// show alert message
alert('no client side errors!');
}
// prevent default so the form doesn't submit. We can return true and
// the form will be submited or proceed with a ajax request.
event.preventDefault();
});
});
</script>
I'd like to validate a form step by step via Javascript. For example, I've like that as soon as a user fills an input box and goes to another one, a Javascript function is called. In other words, I've like to create a real-time validation.
HTML:
<form id="form_register" method="post" action="">
<fieldset>
<legend>Register</legend>
<ul>
<li>
<label for="username">Username:</label>
<input type="text" name="username" id="username" maxlength="25" />
</li>
<li>
<label for="password">Email address:</label>
<input type="text" name="email" id="email" maxlength="50"/>
</li>
<li>
<label for="password">Password:</label>
<input type="password" name="password" id="password" maxlength="32"/>
</li>
<li>
<label for="password">Confirm Password:</label>
<input type="password" name="cpassword" id="cpassword" maxlength="32"/>
</li>
</ul>
<input type="submit" value="Create Account">
</legend>
</fieldset>
</form>
I've already created the .js file and it looks like the following one.
Javascript:
function checkUsername(){
//etc..
}
function checkEmail(){
//etc..
}
function checkPassword(){
//etc..
}
function checkConfirmPassword(){
//etc..
}
How do I link the HTML page with the script?
Thank you.
Use the onblur event, as described here
<input type="text" name="username" id="username" maxlength="25" onblur="checkUsername()" />
It sounds like you're looking to execute these functions on the blur event for each input element. Something like this:
var usernameInput = document.getElementById('username');
usernameInput.onblur = checkUsername;
//How do I link the HTML page with the script? Thank you.
using the script tag:
also, i am not sure why everyone is suggesting onblur, isn't onchange is better for validation purpose? why would we want to validate when the value is not changed? onblur may be required only when the validation of a field is dependant on the value of other fields.
You could do this:
$('input').onblur(function() {
if ($(this).is('[name=username]')) checkUsername()
// etc
})
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Form validation in javascripit does not work propably
I used the validate() to validate the form.
Here is the html:
<form id="form3" name="form3" method="post" action="changepassExcution.php">
<ul> <li id="foli1" class="notranslate">
<label class="desc" id="title1" for="oldpass">
old password:
</label>
<div>
<input id="oldpass" name="oldpass" type="password" class="field text medium required" maxlength="255" tabindex="1"/> </div></li>
<li id="foli2" class="notranslat">
<label class="desc" id="title2" for="newpass">
new password:
</label>
<div>
<input id="newpass" name="newpass" type="password" class="field text medium required" maxlength="255" tabindex="2" />
</div></li>
<li id="foli3" class="notranslate">
<label class="desc" id="title3" for="retypenewpass">
repeat new password:</label>
<div><input id="retypenewpass" name="retypenewpass" type="password" class="field text medium required" maxlength="255" tabindex="3" /></div></li>
<li class="buttons "><div>
<input id="saveForm" name="saveForm" class="button" type="submit" value="change password"/></div></li>
</ul>
</form>
And here is the javascript:
<script>
$(document).ready(function(){
$("#form3").validate();
});
</script>
The problem is: when I submit the form correctly (valid), it will be submitted, but when the form is invalid, then I correct it the submit doesn't work.
UPDATE : the function is now working Horraaay :) with the following code :
<script>
$(document).ready(function(){
$("#form3").validate();
});
</script>
The only problem was the input form name .. I used 'submit' as a name of the input form however before was on diffrient name..
try:
<script>
$(document).ready(function(){
$("#form3").validate();
});
</script>
edit
try:
<script>
$(document).ready(function(){
$("#form3").submit(function(){
$(this).validate();
});
});
</script>
Is it possible that it works, but there are no rules for validation - so it always passes?
How about setting some rules like this:
<script>
$(document).ready(function(){
$("#form3").validate({
rules: {
oldpass: { required: true },
newpass: { required: true },
}
});
});
Read more in jQuery documentation