Form submitting even after Validation fail - javascript

My form is submitting even after the validation fails and alert appears for some specific field for correction.
function validateForm() {
var subscriberName = trimAll(document.getElementById("subscriberName").value);
//Validators like this
if (subscriberName.length < 1) { alert("Please enter First Name.");
document.getElementById("subscriberName").focus(); return false; } else { var iChars="_!##$%^&*()+=-[]\\\';,./{}|\"
:<>?1234567890";
var flag = "false";
for (var i = 0; i < subscriberName.length; i++) { if (iChars.indexOf(subscriberName.charAt(i)) !=-1) {
alert("The First name has special character or numbers. \nThis is not allowed.");
document.getElementById("subscriberName").focus(); return false; } }
document.getElementById("subscriberForm").submit(); }

Update your button's onclick. Add return in it as onclick="javascript: return validateForm();".
Your button's html should be as below.
<button name="button" class="button" id="button" onclick="javascript: return validateForm();" value="Update"> <span style="color:#FFFFFF; font-size: 15px">Add </span> </button>
You can test it below.
function validateForm() {
return false;
}
function validateFormTrue() {
return true;
}
<form name="subscriberForm" modelAttribute="subscriberRequest" method="post" action="/subscriber/saveAjaxSubscriber.htm" id="subscriberForm">
<button name="button" class="button" id="button" onclick="javascript: return validateForm();" value="Update"> <span style="color:#FFFFFF; font-size: 15px">return false test </span> </button>
<button name="button" class="button" id="button" onclick="javascript: return validateFormTrue();" value="Update"> <span style="color:#FFFFFF; font-size: 15px">return true test </span> </button>
</form>

Related

Disable 2 submit buttons in single form after clicking button

when having two submit buttons named submit and nopay, only one is working at a time. I need to disable both buttons after clicking and submitting the form.
<form enctype="multipart/form-data" method="post" action="
<?php echo base_url();?>user/Purchases_ctrl/create_vendor_payment" onsubmit='disableButton()'>
<div class="d-flex content-block mb-2 pt-4 justify-content-center">
<button type="submit" name="submit" value="submit" id="submit" class="btn btn-outline-custom w-30 btn-sm submit-btn mr-3">Submit</button>
<button type="submit" id="nopay" name="nopay" value="nopay" class="btn btn-outline-custom w-30 btn-sm submit-btn">No Vendor Payments Today</button>
</div>
</form>
<script>
function disableButton() {
var submit = document.getElementById('submit');
var nopay = document.getElementById('nopay');
submit.disabled = true;
submit.innerText = 'SUBMITTING';
nopay.disabled = true;
nopay.innerText = 'No Vendor Payments Today';
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Disable button using disabled property</title>
</head>
<body>
<p>Click the button to submit data!</p>
<p>
<input type="submit" value="Submit" id="btClickMe"
onclick="disableButton(); this.disabled = true;" />
<input type="submit" value="submit" onclick="disableButton(); this.disabled=true;" >
</p>
<p id="msg"></p>
</body>
<script>
function disableButton() {
var msg = document.getElementById('msg');
var inputs = document.getElementsByTagName("INPUT");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "submit") {
inputs[i].disabled = true;
}
}
msg.innerHTML = 'Data submitted and the button disabled ☺';
}
</script>
</html>
<script>
function disableButton(btn) {
setTimeout( () => {
btn.disabled = true;
btn.style.backgroundColor = '#36aeeb';
btn.style.color = "white";
}) // No need to set a duration for the timeout
}

Calling 2 buttons functions in the same form PHP

I implemented a page with 2 buttons which call 2 different functions on their button clicks. But the any of the buttons are not working. They are just reload the same page. I'll put my code down below.
<form class="form-horizontal" id="add_product_form" method="post">
<script>
function submitForm(action)
{
document.getElementById('add_product_form').action = action;
document.getElementById('add_product_form').submit();
}
</script>
<div class="col-sm-12">
<input type="submit" onclick="return check_add_to_cart();" class="btn btn-danger btn-lg add-to-cart btn-block" value="Add To Cart">
<input type="submit" onclick=onclick="return check_add_to_quote();" class="btn btn-danger btn-lg add-to-quote btn-block" value="Add To quote">
</div>
Any help would be really appreciated. Thank you! Add_to_cart function which is mentioned above the page.
function check_add_to_cart(){
var quantity = jQuery('#quantity').val();
var data = jQuery('#add_product_form').serialize();
if(jQuery.isNumeric(quantity) && quantity > 0){
return true
} else if(quantity < 1) {
jQuery('#cart_error').html('<?=display_error_str("Quantity must be greater than 0.");?>');
return false;
}else {
jQuery('#cart_error').html('<?=display_error_str("Quantity must be a number.");?>');
return false;
}
function check_add_to_quote(){
var quantity = jQuery('#quantity').val();
var data = jQuery('#add_product_form').serialize();
if(jQuery.isNumeric(quantity) && quantity > 0){
return true
} else if(quantity < 1) {
jQuery('#cart_error').html('<?=display_error_str("Quantity must be greater than 0.");?>');
return false;
}else {
jQuery('#cart_error').html('<?=display_error_str("Quantity must be a number.");?>');
return false;
}
}
You can do following. Change typesubmit to button And as you already have submitForm() method. Call this method when you want to return true.
Change
<input type="submit" onclick="return check_add_to_cart();" class="btn btn-danger btn-lg add-to-cart btn-block" value="Add To Cart">
<input type="submit" onclick=onclick="return check_add_to_quote();" class="btn btn-danger btn-lg add-to-quote btn-block" value="Add To quote">
To
<input type="button" onclick="return check_add_to_cart();" class="btn btn-danger btn-lg add-to-cart btn-block" value="Add To Cart">
<input type="button" onclick=onclick="return check_add_to_quote();" class="btn btn-danger btn-lg add-to-quote btn-block" value="Add To quote">
And change your js functions to:
function check_add_to_cart(){
var quantity = jQuery('#quantity').val();
var data = jQuery('#add_product_form').serialize();
if(jQuery.isNumeric(quantity) && quantity > 0){
//return true
submitForm(""); //you can pass action in this if you want other page
} else if(quantity < 1) {
jQuery('#cart_error').html('<?=display_error_str("Quantity must be greater than 0.");?>');
return false;
}else {
jQuery('#cart_error').html('<?=display_error_str("Quantity must be a number.");?>');
return false;
}
function check_add_to_quote(){
var quantity = jQuery('#quantity').val();
var data = jQuery('#add_product_form').serialize();
if(jQuery.isNumeric(quantity) && quantity > 0){
//return true
submitForm(""); //you can pass action in this if you want other page
} else if(quantity < 1) {
jQuery('#cart_error').html('<?=display_error_str("Quantity must be greater than 0.");?>');
return false;
}else {
jQuery('#cart_error').html('<?=display_error_str("Quantity must be a number.");?>');
return false;
}
}
And remove submitForm() definition between html and add it to script block

javascript form validations

I am using javascript validations for required field. Here is my html
<form class="uk-form-stacked" name="myForm" action="<?php echo base_url(); ?>admin/pages/create_service" id="wizard_advanced_form" method="post" enctype="multipart/form-data" onsubmit="return myFunction(this)" novalidate>
<div data-uk-grid-margin="" class="uk-grid">
<div class="uk-width-medium-1-2">
<label for="service_title">Service Title<span class="req">*</span></label>
<input type="text" name="service_title" id="validd" class="md-input" />
<p id="demo"></p>
</div>
</div>
<div class="uk-grid">
<button type="submit" class="md-btn md-btn-primary md-btn-wave-light waves-effect waves-button waves-light" >Submit</button>
</div>
</form>
my javascript is
<script>
function myFunction(form) {
var x, text;
x = document.getElementById("validd").value;
if (x == null || x == "") {
text = "Input not valid";
}
document.getElementById("demo").innerHTML = text;
return false;
}
</script>
Now when my input field is empty and i submit form it shows me input not valid that is fine. but even when i fill some textin input then it shows me undefined in place of input not valid instead of submitting form.
please help..
You forgot to add an else where it would return true if the condition is not satisfied.
<script>
function myFunction(form) {
var x, text;
x = document.getElementById("validd").value;
if (x == null || x == "") {
text = "Input not valid";
document.getElementById("demo").innerHTML = text;
return false;
}
else{
return true;
}
}
</script>
You can use instead:
<html>
<head>
<script>
function valid()
{
var x;
x=document.getElementById(validd).value;
if(x==null || x=="")
{
alert("Please input service title");
document.getElementById(validd).focus();
return false;
}
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return valid()">
<input type="text" name="service_title" id="validd"/>
<button type="submit">Submit</button>
</form>
</body>
</html>`

Validate Numbers Javascript

I have written the code so far and came up with this. I have to
Make sure the user input numbers into the text boxes and I was given errors using the Xhtml format, one, the '&&' sign gave me errors and due to online help, I was told I needed to use //
As I student learning Javascript I have no idea what this is or means, but as I placed it there, I was given more errors and my code crashed up after the javascript was added.
Thanks for the help in advance
<head>
<script type = 'text/javascript'>
// <![CDATA[
$('#submit').click(function(){
validateRange();
validateRa();
})
function validateRange() {
var txtVal = document.getElementById("CustomerID").value;
var txtVal1=parseInt(txtVal);
if (txtVal1 >= 3000 && txtVal1 <= 3999) {
return true;
}
else {
alert('Please enter a number between 3000-3999');
return false;
}
}
function validateRa() {
var txtVal1 = document.getElementById("AcctNo").value;
var txtVal2=parseInt(txtVal1);
if (txtVal2 >= 90000 && txtVal2 <= 99999) {
return true;
}
else {
alert('Please enter a number between 90000-99999');
return false;
}
}
// ]]
</script>
<title>Account Lookup</title>
</head>
<body>
<h1> Please Provide Your Information</h1>
<p><input type="text" id="AcctNo" value="Account Number"/></p>
<p><input type="text" id="CustomerID" value="CustomerID" onchange="validateRange()"/></p>
<p><input type="text" name="Type" value="Account Type" onchange="validateRange()"/></p>
<p><input type="text" name="balance" value="Balance"/></p>
<p class="submit" />
<input type="submit" name="commit" value="Submit" id="submit" /><button type="reset" value="Clear">Clear</button></p>
</body>
</html>
EDITED
try using this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#submit').click(function(){
validateRange();
validateRa();
});
});
function validateRange() {
var txtVal = document.getElementById("CustomerID").value;
var txtVal1=parseInt(txtVal);
if (txtVal1 >= 3000 && txtVal1 <= 3999) {
return true;
}
else {
alert('Please enter a number between 3000-3999');
return false;
}
}
function validateRa() {
var txtVal1 = document.getElementById("AcctNo").value;
var txtVal2=parseInt(txtVal1);
if (txtVal2 >= 90000 && txtVal2 <= 99999) {
return true;
}
else {
alert('Please enter a number between 90000-99999');
return false;
}
}
</script>
<html>
<title>Account Lookup</title>
<body>
<h1> Please Provide Your Information</h1>
<p><input type="text" id="AcctNo" value="Account Number"/></p>
<p><input type="text" id="CustomerID" value="CustomerID" onchange="validateRange()"/></p>
<p><input type="text" name="Type" value="Account Type" onchange="validateRange()"/></p>
<p><input type="text" name="balance" value="Balance" /></p>
<p class="submit" />
<input type="submit" name="commit" value="Submit" id="submit" /><button type="reset" value="Clear">Clear</button></p>
</body>
</html>
BTW the function validateRa missing the closing curly braces you need to add } before // ]]
function validateRa() {
var txtVal1 = document.getElementById("AcctNo").value;
var txtVal2=parseInt(txtVal1);
if (txtVal2 >= 90000 && txtVal2 <= 99999) {
return true;
}
else {
alert('Please enter a number between 90000-99999');
return false;
}
} //<= this is missing in your code
// ]]

How to validate enter key in Javascript?

I have following script running on my site. Users have to enter "testnumber" which is 10 character long. There is a length check validation. When users click on submit button my script does work smoothly.
But the problem is that when users press the enter key instead of mouse click, it does not warn the users. How can i change it so that when the users press the enter key this script will give the same message as they click on submit button?
<script type="text/javascript">
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function formvalidation(form) {
var isSubmitting = false;
var value = document.getElementById('testnumber').value;
if (value.length == 10) {
if (isNumber(value)) {
isSubmitting = true;
}
}
if (isSubmitting) {
form.submit();
}
else {
alert('testnumber must be at least 10 character.');
return false;
}
}
</script>
This is the part of the html code:
<tr>
<td align="center">
<label>
<div align="left">
<span class="text7"><strong>enter testnumber:</strong></span>
<input name="testnumber" type="text" id="testnumber" size="50" value="<%=(testnumber)%>" />
<input name="search" id="search" type="button" class="normalmail" value="Search" onclick="formvalidation(frmSearch);" />
</div>
</label>
</td>
</tr>
Hope this will help
<from onsubmit="return formvalidation()">
<tr>
<td align="center">
<label>
<div align="left">
<span class="text7"><strong>enter testnumber:</strong></span>
<input name="testnumber" type="text" id="testnumber" size="50" value="<%=(testnumber)%>" />
<input name="search" id="search" type="button" class="normalmail" value="Search" onclick="formvalidation(frmSearch);" />
</div>
</label>
</td>
<!-- </tr></tr> -->
</form>
Your Script
<script type="text/javascript">
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function formvalidation() {
var isSubmitting = false;
var value = document.getElementById('testnumber').value;
if (value.length > 10 && value.length < 10) {
alert('testnumber must be at least 10 character.');
return false
}
else if (isSubmitting) {
return true
}
else {
return false;
}
}
</script>

Categories

Resources