I want to prevent the user from accessing the next page if there is an empty
inputField. The alert does show when the field is empty and i click the button, but i can click 'ok' and i get taken to the next page.
<script type="text/javascript">
window.onload = function(){
function checkFilled(inputField) {
if(inputField.value.length > 1) {
return true;
}
else {
alert('field1 is not filled in');
$("#button1").click(function(e){
e.preventDefault();
});
return false;
}
};
document.getElementById('button1').onclick = function() {
var field1 = document.getElementById('field1');
checkFilled(field1);
};
};
</script>
<input type="text" name="field1" id="field1"/>
<a href="nextpage.html">
<div id="button1"></div>
</a>
You used an a tag where the href attribute is set and gets you immediately to the next page, although the inputField is empty. This should do what you want:
window.onload = function(){
function checkFilled(inputField) {
if(inputField.value.length > 1) {
return true;
}
else {
alert('field1 is not filled in');
return false;
}
};
document.getElementById('button1').onclick = function() {
var field1 = document.getElementById('field1');
return checkFilled(field1);
};
};
<input type="text" name="field1" id="field1"/>
<form action="nextpage.html">
<input id="button1" type="submit" value="next">
</form>
Or if you prefer to use an a tag instead of a button:
function checkFilled() {
if(document.getElementById("field1").value.length > 1) {
window.location.href="nextpage.html";
}
else {
alert('field1 is not filled in');
return false;
}
}
<input type="text" name="field1" id="field1"/>
next
Related
I have a form which validates password null/blank or not using onblur. And I use a submit button to submit the form. However the submit button needs to be clicked twice before to work. It does not work on the first click after something has been filled in the password box. Below is the code.
With respect to Jquery, I require solution in pure Javascript.
I have tried onkeyup, but that is not a good solution as it will put strain on system, and server (for ajax).
<!DOCTYPE html>
<html>
<body>
<script>
var error_user_password = false;
function checkpw(){
var user_password = document.forms["joinform"]["user_password"].value;
if (user_password == null || user_password == "") {
text = "Password : Required";
document.getElementById("errormsg4").innerHTML = text;
error_user_password = false;
} else {
document.getElementById("errormsg4").innerHTML = "";
error_user_password = true;
}
}
function submitall() {
checkpw()
if(error_user_password == false) {
return false;
} else {
return true
}
}
</script>
</body>
<form id="joinform" method="post" name="joinform" action="#hello" onsubmit="return submitall()" >
<h2>Join</h2>
<input type="password" name="user_password" id="user_password" placeholder="Password" onblur="checkpw()" />
<div class ="errormsg" id ="errormsg4"></div><br>
<input type="submit" name="join" id="join" value="Submit" ><br><br>
</form>
</html>
OnBlur Validation Requires Onsubmit Button to Be Clicked Twice in Pure Javascript
This happens because the blur event is captured from the onblur event handler and not bubbled to the form submit button.
A full javaScript solution is based on:
addEventListener
activeElement: inside the blur event I check after 10 milliseconds if the submit button get the focus.
My snippet:
var error_user_password = false;
function checkpw(ele, e){
var user_password = document.forms["joinform"]["user_password"].value;
if (user_password == null || user_password == "") {
text = "Password : Required";
document.getElementById("errormsg4").innerHTML = text;
error_user_password = false;
} else {
document.getElementById("errormsg4").innerHTML = "";
error_user_password = true;
}
}
function submitall(ele, e) {
checkpw();
if(error_user_password == false) {
e.preventDefault();
} else {
console.log('form submitted');
}
}
window.addEventListener('DOMContentLoaded', function(e) {
document.getElementById('user_password').addEventListener('blur', function(e) {
checkpw(this, e);
setTimeout(function() {
if (document.activeElement.id == 'join') {
document.activeElement.click();
}
}, 10);
}, false);
document.getElementById('joinform').addEventListener('submit', function(e) {
submitall(this, e);
}, false);
});
<form id="joinform" method="post" name="joinform" action="#hello">
<h2>Join</h2>
<input type="password" name="user_password" id="user_password" placeholder="Password"/>
<div class ="errormsg" id ="errormsg4"></div><br>
<input type="submit" name="join" id="join" value="Submit" ><br><br>
</form>
I would like to show my div when the email isn't validated. And hide it when it is.
This is what I tried, but it isn't working.
$("#fes-email").on("change.validation keyup.validation", function () {
var email = $(this).val();
$("#fes-submit").prop("disabled", email.length == 0 || !isValidEmailAddress(email));
$('#fes-form').submit(function () {
return !$("#fes-submit").is(':disabled')
$("#notification-container").show("slide");
});
}).trigger('change.validation');
You exit the function before you show it.
$('#fes-form').submit(function () {
return !$("#fes-submit").is(':disabled') <---exits function
$("#notification-container").show("slide"); <-- will never be called
});
AND you have a BIGGER problem. On every single change you are binding a submit handler to the form. That is BAD. Take the submit handler OUT of the change event.
(function() {
var isValid = false;
$("#fes-email").on("change.validation keyup.validation", function() {
var email = $(this).val();
isValid = email.length && isValidEmailAddress(email);
}).trigger('change.validation');
$('#fes-form').submit(function() {
if (isValid) {
$("#notification-container").slideUp();
} else {
$("#notification-container").slideDown();
}
return isValid;
});
}());
function isValidEmailAddress(email) {
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
#notification-container {
background-color: red;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="fes-form">
<label for="fes-email">Email</label>
<input type="text" id="fes-email" name="fes-email" class="validation" />
<input type="submit" />
</form>
<div id="notification-container">Invalid Email</div>
So i want to add to my page a script that would transfer a user after x input to subpage assigned to this input.
Try below code:
<form>
Password: <input type="text" name="password" id='txtPassword'>
<button id='btnSubmit'>Submit</button></form>
<script>
var submit = document.getElementById('btnSubmit')
submit.onclick = function () {
var password = document.getElementById('txtPassword').value;
if (condition1)
{
goes to a subpage1
}
else if (condition2)
{
goes to a subpage1
}
else
{
alert with some message
}
}
</script>
Add a button :
<form>
Password: <input type="text" name="password">
<button onclick="checkPass();">Submit</button>
</form>
Now in JS
<script>
function checkPass(){
var password = document.getElementsByName("password")[0].value;
if ( password != "") //or any condition
{
window.location.href = 'page_1_url' ; //goes to a subpage1
}
else if (condition2) //...
{
window.location.href = 'page_2_url' ; //goes to a subpage1
}
else
{
alert('....') ; //alert with some message
}
}
I like to add confirmation dialog. like"confirm adding (the amount)?" if yes it will proceed to addcontribution.php and if no it will go back to itself and reset the field.
<form form="CONTRIFORM" name='contribution' method="POST" Action="addcontribution.php" onSubmit="return formvalidation2();">
<center>
Amount:
<input type="text" name="contriamnt" id="contriamnt" size="15" placeholder=" Amount"></br></br>
<button id="searchbutton" type="submit" name="submit" value="Submit">ADD</button></br>
</center>
</form>
<script>
function formvalidation2() {
var amntDATA = document.contribution.contriamnt;
if(allnumber(amntDATA)) {
if(ChangeText()) {
if(new_tab()) {
}
}
}
return false;
}
function allnumber(amntDATA) {
var x = /^[0-9]+$/;
if(amntDATA.value.match(x)) {
return true;
} else {
alert('Invalid Amount.');
return false;
}
}
</script>
Example
if (confirm('Confirm Adding (the amount)?')){
window.location = "http://www.google.com/"; // your Custom Link
}else{
document.getElementById('contriamnt').value="";
}
I have the following input fields:
<input type="text" value="5" maxlength="12" id="qty" class="input-text qty" name="qty2050" tabindex="1">
and
<input type="text" value="0" maxlength="12" id="qty" class="input-text qty" name="qty2042" tabindex="1">
I use this code to prevent the user from losing inserted data (upon quitting the page):
<script>
window.onbeforeunload = function() {
var showAlert = false;
jQuery('.input-text.qty').each(function (){
//console.log("fonction 1");
var val = parseInt(jQuery(this).val(),10);
if(val > 0) { showAlert = true; }
//alert(val);
});
//console.log("fonction 2");
//console.log(showAlert);
if (showAlert == true) {
console.log("fonction 3");
return 'You have unsaved changes!';
}
}
</script>
I want to add an exception to my submit button, and to not show the alert message when there is a quantity > 0 in one of my input fields.
My problem is in adding this exception!
Thanks for help.
You can use bool confirmUnload. Like here: http://jonstjohn.com/node/23
<script>
var confirmUnload = true;
$("submit").click(function(){ confirmUnload = false; });
window.onbeforeunload = function() {
if (confirmUnload)
{
var showAlert = false;
jQuery('.input-text.qty').each(function (){
//console.log("fonction 1");
var val = parseInt(jQuery(this).val(),10);
if(val > 0) { showAlert = true; }
//alert(val);
});
//console.log("fonction 2");
//console.log(showAlert);
if (showAlert == true) {
console.log("fonction 3");
return 'You have unsaved changes!';
}
}
}
</script>
is this what you want:
<SCRIPT>
function checkForm(e) {
if (!(window.confirm("Do you want to submit the form?")))
e.returnValue = false;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="theForm" action="0801.html"
onSubmit = "return checkForm(event)">
<INPUT type=submit>
</FORM>
your checks will go into the checkForm method in this case