The HTML Code:
<div class="form-container">
<form method="post" id="email">
<div class="form-group">
<label for="exampleInputEmail1" class="typingA spacing"><i class="bi bi-envelope"></i> Email Address:</label>
<input type="email" class="form-control" id="typingEmail" aria-describedby="emailHelp" placeholder="Enter email">
</div>
</form>
<form method="post" id="subject">
<fieldset class="form-group">
<label for="subject" class="typingA spacing">Subject:</label>
<input type="text" class="form-control"name="subject"placeholder="Subject" >
</fieldset>
</form>
<form method="post" id="content">
<fieldset class="form-group">
<label for="content" class="typingA spacing">What would you like me to ask?</label>
<textarea class="form-control" name="content" rows="3" placeholder="What would you like me to ask, Sir/Madam?"></textarea>
</fieldset>
</form>
<div id="buttons">
<button type="submit" id="next" class="btn btn-primary" enabled='enabled'>Next</button>
<button type="submit" id="submit" class="btn btn-primary">Submit</button>
</div>
The JQuery part:
function isEmail(email) {
var regex = /^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
$("#buttons").click(function() {
$("#next").click(function() {
if(isEmail($('#typingEmail').val()) == false)
{
$(':input[type="submit"]').prop('disabled', false);
}
$("#subject").toggle();
$("#email").toggle();
$("#next").click(function() {
$("#content").toggle();
$("#email").toggle();
$('#next').attr('disabled', true);
});
});
});
What I am trying to do is validate the email. if it is valid, the "next button" should enable, else it should not enable. I tried but didn't succeed. I appreciate your time and help. Ta!
Note I tried to find similar topic on StackOverflow but didn't find it. So, just a humble
request, dont report.
I think you just want to disable and enable the next button when the email is valid or not valid, here is a workaround, i don't know whether it cover your requirement or not.
function isEmail(email) {
var regex = /^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
$(function(){
var $emailInput = $('#typingEmail');
var $nextBtn = $('#next');
function checkIfEmailOk(){
return isEmail($emailInput.val());
}
function toggleNextByEmail(){
$nextBtn.prop('disabled', !checkIfEmailOk());
}
// or you can listen the 'blur' event
// but the validation will only triggered after your cursor moved out from the input area
// and the 'input' event may need some polyfill in lower versions of IE
$emailInput.on('input', function(){
toggleNextByEmail();
});
// disable the next button's onclick event when the email is not valid
$nextBtn.on('click', function(e){
if(!checkIfEmailOk()){
// email not ok
e.preventDefault();
$emailInput.focus();
}
});
// if you want to check the email input and toggle the next button when domready
toggleNextByEmail();
});
You can try it in the codepen.
Related
I have a form that includes a checkbox:
<form action="tienda3.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter your email to confirm the order">
</div>
<div class="form-group">
<div class="checkbox">
<label><input type="checkbox" id="TOS" value="This"> I certify that I am of legal age and I have read and agree to the
Terms of use and
Privacy Policy of Sdocks LLC</label>
</div>
</div>
<button type="submit" onclick="validate()" class="btn btn-primary">Submit</button>
</form>
I need to verify that the user checks the checkbox to post the form to tienda3.php.
I am using this script to validate that the user has checked the checkbox or not:
<script type=text/javascript>
function validate(){
if (document.getElementById('TOS').checked){
alert("checked") ;
}else{
alert("You didn't check it! Let me check it for you.");
return true;
}
}
</script>
If the checkbox is checked then the form is posted to tienda3.php, else an alert must be shown to inform the user that it is mandatory to check the checkbox to continue the process.
In my case, the form is always posted to tienda3.php. The script detects if the checkbox is checked or not, but in both cases, the form always opens file tienda3.php
I suggest you make this changes:
/* replace this:
* <form action="tienda3.php"> */
<form action="tienda3.php" onsubmit="return validate(event)" >
/* replace this:
* <button type="submit" onclick="validate()" class="btn btn-primary">Submit</button> */
<button type="submit" class="btn btn-primary">Submit</button>
/* and replace the validate() function with: */
function validate(event){
if (document.getElementById('TOS').checked){
alert("checked") ;
return true;
} else {
event.preventDefault();
alert("You didn't check it! Let me check it for you.");
return false;
}
}
Let me know if it worked as expected.
You can also find solutions by searching Stackoverflow How to prevent form from being submitted - inline javascript
I prefer to use ajax request instead of form action
HTML
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter your email to confirm the order">
</div>
<div class="form-group">
<div class="checkbox">
<label><input type="checkbox" id="TOS" value="This"> I certify that I am of legal age and I have read and agree to the
Terms of use and
Privacy Policy of Sdocks LLC</label>
</div>
</div>
<button type="button" onclick="SubmitRequest()" class="btn btn-primary">Submit</button>
</form>
js
function SubmitRequest() {
if (document.getElementById('TOS').checked){
var postObj = {
email: $('#email').val(),
};
$.ajax({
url: "/tienda3.php",
data: JSON.stringify(postObj),
type: "POST",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (result) {
console.log(result)
},
error: function (errormessage) {
console.log(errormessage);
}
});
}
});
I have a login button that works fine,it logs a user in etc.. but i want to allow the user to press the enter key to login as well. how do i do this.I tried a test using onkeypress but it didnt do anything as bellow
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Username id="username" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="........" id="password" onkeypress=myFunction() /> //i just tried this myFunction() to see if it would give an alert but it doesnt
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-login" id="btnLogin">Log in</button>
</div>
</div>
</form>
function myFunction()
{ alert("button pressed")}
so how do i use the enter key to submit my request in javascript and jquery
As you've placed the input within a form element which contains a submit button, you get this behaviour by default. To hook to it, use the submit event of the form, like this:
$('form').on('submit', function(e) {
e.preventDefault(); // only used to stop the form submission in this example
console.log('form submitted');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" id=" username" />
</div>
<div class="form-group ">
<input type="password" class="form-control" placeholder="........" id="password" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-login" id="btnLogin">Log in</button>
</div>
</form>
Note that I fixed the missing " after the placeholder attribute in the first input. You also don't need the trailing space after all the attribute values, so I removed those too.
First you need to send the Event to the myFunction() function and add ID to your form to add submit manually::
HTML
<form id='myForm'>
<!-- form actions (etc..) -->
<input type="password" class="form-control" placeholder="........" id="password" onkeypress=myFunction(e) />
<!-- form actions (etc..) -->
</form>
Now in ASCII the reenter code is 13 all you need to check is when the pressed key is reenter (13) then you need to take the event key code and call the submit function::
function myFunction(e)
var code = (e.keyCode ? e.keyCode : e.which);
{
if (code == "13")
{
//Calling the submit or clicking manually it
$( "#myForm" ).submit();
}
}
I have a text form with an input field for name and an input field for email. On the mobile site, when the user clicks on a field, it is brought to the top of the viewport with the keypad below it. However, when either text field is de-selected, it gets stuck here and does not reset.
I have found the jquery focusOut event to reset the page zoom, but this fires whenever either field is not focused (ie. when the name fields is active and email is not). How can I detect when NEITHER input field is in focus?
Right now my form code is:
<form class="form-signin" action="http://" method="post" id="subForm" onsubmit="movedrop()">
<input type="text" class="form-control" id="fieldName" name="cm-name" placeholder="Full Name" tabindex=1 required>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="fieldEmail" name="cm-hjjhkh-hjjhkh" class="form-control" placeholder="Email" tabindex=2 required>
<button class="btn btn-lg btn-white btn-block subscribe" id="click-subscribe" type="submit" tabindex=3>SUBSCRIBE</button>
</form>
and my javascript:
$("form").focusout(function() {
document.body.scrollTop = 0;
console.log("focus out");
})
Which fires every time either field is deselected. I want it to fire when neither is selected.
You need to check that none of the others members have become active in the meantime. Focusout just tells you when one of the input fields loses focus.
Try the following code:
$("form").focusout(function() {
var anyActive = false;
$.each($(this).find(':input'), function(index, inputField){
if($(inputField).is(':active')){
anyActive = true;
}
});
if(anyActive){
$('#focusBox').html('One is active');
} else {
$('#focusBox').html('None is active');
}
document.body.scrollTop = 0;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-signin" action="http://" method="post" id="subForm" onsubmit="movedrop()">
<input type="text" class="form-control" id="fieldName" name="cm-name" placeholder="Full Name" tabindex=1 required>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="fieldEmail" name="cm-hjjhkh-hjjhkh" class="form-control" placeholder="Email" tabindex=2 required>
<button class="btn btn-lg btn-white btn-block subscribe" id="click-subscribe" type="submit" tabindex=3>SUBSCRIBE</button>
</form>
<div id="focusBox"></div>
I've dealt with this type of thing in the past by looking at focus events for the entire page as a whole. Essentially, I use two flags to keep track of whether or not the form 1) has focus and 2) has ever had focus. Then, I use a single handler for both click and focusin for the entire body the looks at the target of the event: if that target is inside the form, we know that the form hasn't lost focus. If not and wasFormFocused, then we know the form has lost focus: reset the flags and do whatever else is necessary (in this case, scroll to the top). This solution handles tabing out, clicking out, and also clicking on labels with the form.
var wasFormFocused = false, isFormFocused = false;
$("#theForm").focusout(function() {
isFormFocused = false;
});
var handleClickOrTab = function(event) {
if ($(event.target).parents("#theForm").length) {
wasFormFocused = true;
return;
}
if (wasFormFocused && !isFormFocused) {
wasFormFocused = false;
document.body.scrollTop = 0;
$("body").append('<br>form lost focus (scrollTop = 0)');
}
}
$("body").click(handleClickOrTab).focusin(handleClickOrTab);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="theForm" class="form-signin" action="http://" method="post" id="subForm" onsubmit="movedrop()">
<input type="text" class="form-control" id="fieldName" name="cm-name" placeholder="Full Name" tabindex=1 required>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="fieldEmail" name="cm-hjjhkh-hjjhkh" class="form-control" placeholder="Email" tabindex=2 required>
<button class="btn btn-lg btn-white btn-block subscribe" id="click-subscribe" type="submit" tabindex=3>SUBSCRIBE</button>
</form>
<h4>CLICK me (cause you can't tab to me)</h4>
<input type="text" placeholder="TAB to me or CLICK me">
I am using bootstrap-validator and it works great for validation but I now need to disable an input until the previous input has been validated. I looked at the bootstrap-validator and I saw these events which look like they will help in this process, but I cannot figure out how to call them on an input id.
HTML
<form role="form" data-toggle="validator">
<div class="form-group">
<input type="text" class="form-control" id="login-name" placeholder="Your Name" data-error="Please provide a valid name" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" id="chosen-name" placeholder="Your Chosen Name" data-error="Please provide a valid name" required disabled>
<div class="help-block with-errors"></div>
</div>
<button type="submit" class="btn btn-default action-btn">Submit</button>
</form>
JS
//Bootstrap Validator
$('form').validator({
// Trying to check if #login-name is valid, obviously not working!!!
if(valid.#login-name){
$('#chosen-name').prop('disabled', false);
} else{
$('#chosen-name').prop('disabled', true);
}
});
your js should be something like this:
$('form')
.validator()
.on('valid.bs.validator', function (e) {
if(e.relatedTarget.id==='login-name')
{
$('#chosen-name').prop('disabled', false);
}
})
.on('invalid.bs.validator', function (e) {
if(e.relatedTarget.id==='login-name')
{
$('#chosen-name').prop('disabled', true);
}
})
Since it uses the Constraint Validation API you can use
//Bootstrap Validator
$('form').validator().on('validated.bs.validator', function(e){
var target = e.relatedTarget;
if (target.id == 'login-name'){
$('#chosen-name').prop('disabled', !target.checkValidity());
}
})
Demo at http://codepen.io/gpetrioli/pen/MaGJzL?editors=001
I am trying to handle form validation on button click. It is validating the form but not showing error.
can anyone help me in this?
<form id="the-form" action="#">
<input type="text" required="required" placeholder="Required text" />
<input type="email" required="required" placeholder="email" />
<button id="btn" type="button">Submit</button>
</form>
JavaScript:
$("#btn").on("click", function(){
if($("#the-form")[0].checkValidity())
{
alert('validated');
}
else
{
//show errors
return false;
}
});
http://jsfiddle.net/5ycZz/
Try
reportValidity()
So you'd have
$("#btn").on("click", function(){
if($("#the-form")[0].checkValidity()) {
alert('validated');
}
else {
$("#the-form")[0].reportValidity();
}
});
I've achieved this by doing steps below:
1) I'm having form:
<form>
<textarea required></textarea>
<input type="submit" style="display:none;"/>
</form>
<a>Some other button to trigger event</a>
2) Now we have to check if the form is filled correctly:
//this is <a> click event:
if (!$('form')[0].checkValidity()) {
$('form').find('input[type="submit"]').click();
return false;
}
This will trigger form sending but won't send because there are errors ;)
It appears that html5 validation errors are displayed on input[type="submit"] click :)
Hope will work for You too! :)
here is the perfect answer
<form id="the-form" action="#">
<input type="text" required="required" placeholder="Required text" />
<input type="email" required="required" placeholder="email" />
<button id="btn" type="submit">Submit</button>
$("#btn").on("click", function(){
if($("#the-form")[0].checkValidity())
{
alert('validated');
}
else
{
return 0;
}
});
Remove the else statement. (Update)
$("#btn").on("click", function(){
if($("#the-form")[0].checkValidity())
{
alert('validated'); //will appear if name and email are of valid formats
}
});
You should be able to simply add onclick="return validateForm()".
<button id="btn" onclick="return validateForm()" type="button">Submit</button>