Problems with outputting error after submit empty fields - javascript

i have a problem with my script, the only problem is outputting error.
the error just bricks after submit_button. so that means when the fields are empty it has to output error and it works but the problem the output just bricks
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post">
<input type="text" id="text_field1" />
<input type="text" id="text_field2">
<button type="submit" id="submit_button">Submit</button>
<button type="submit">Submit</button>
<p id="error_resp"></p>
</form>
<script>
$("#submit_button").click(function() {
if ($("#text_field1").val() == "")
$('#error_resp').text('please fill the required field');
else if ($("#text_field2").val() == "")
$('#error_resp').text('please fill the required field');
else
return true;
});
</script>

There are few issues in your form HTML.
You are not using preventDefault() method which will prevent the default behavior of a form so the inout can be validated.
Also, you do not need check empty input like == "" You can just ! to say if my input is empty then show error message
You are displaying errors in error_resp ideally use .html to clear the previous message and replace with new message
You can read more about .html here
Run snippet to below to see it working.
$("#submit_button").click(function(e) {
e.preventDefault();
if (!$("#text_field1").val()) {
$('#error_resp').html('please fill the first required field');
} else if (!$("#text_field2").val()) {
$('#error_resp').html('please fill the second required field');
} else {
$('#myForm').submit();
console.log('All looking good. Form will submit now')
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="myForm" action="filename.php">
<input type="text" id="text_field1" />
<input type="text" id="text_field2">
<button type="submit" id="submit_button">Submit</button>
<p id="error_resp"></p>
</form>

Related

How to check if textbox is empty and display a popup message if it is using jquery?

I'm trying to check if the textbox is empty for my form. However, whenever I try to hit submit instead of an alert box message, telling me Firstname is empty I get "Please fill out filled".
('#submit').click(function() {
if ($('#firstname').val() == '') {
alert('Firstname is empty');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="elem" autocomplete="on">
First Name:
<br>
<input type="text" name="firstname" id="firstname" required placeholder="Enter the first name" pattern="[A-Za-z\-]+" maxlength="25"><br>
<input type="submit" id="submit" value="Submit" />
</form>
Firstly I'm assuming that the missing $ is just a typo in the question, as you state that you see the validation message appear.
The reason you're seeing the 'Please fill out this field' notification is because you've used the required attribute on the field. If you want to validate the form manually then remove that attribute. You will also need to hook to the submit event of the form, not the click of the button and prevent the form submission if the validation fails, something like this:
$('#elem').submit(function(e) {
if ($('#firstname').val().trim() == '') {
e.preventDefault();
alert('Firstname is empty');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="elem" autocomplete="on">
First Name:
<br>
<input type="text" name="firstname" id="firstname" placeholder="Enter the first name" pattern="[A-Za-z\-]+" maxlength="25"><br>
<input type="submit" id="submit" value="Submit" />
</form>
Personally I'd suggest you use the required attribute as it saves all of the above needless JS code - unless you need more complex logic than just checking all required fields have been given values.
Because you have the required property set.It is giving you Please fill out field validation as the error message.It is the validation that HTML5 is performing.
For this please make one function like :
function Checktext()
{
if ($('#firstname').val() == '') {
alert('Firstname is empty');
return false;
}
else
{
return true;
}
}
now call this function on submit button click like :
<input type="submit" id="submit" value="Submit" onclick="return check();" />

Submit a form if the statement is true

I am trying to write a very simple jQuery function which will have two main properties. The first one will be to check if the field is empty or not. The second one will be if the field is not empty to execute a form which will lead to a PHP coded page. I am very new to jQuery and I will be very grateful if someone can point where exactly is my mistake. Thank you in advance.
function Captcha() {
$('#Button').click(function() {
if ($("#Field").val().length == 0) {
alert("Please fill the box");
return false;
} else {
alert("Your code is saved");
return true;
}
});
}
$(document).ready(function() {
Captcha();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="success.php" id="Alpha" method="post" onsubmit="return Captcha();">
<input id="Field" type="text" placeholder="Enter key here">
<button id="Button" type="submit" form="Alpha">Confirm</button>
</form>
Don't work with the button's click event, work with the form's submit event because a form can be submitted via the keyboard and therefore the button can be circumvented.
You can see a working version here (Stack Overflow prevents submit code from working in the snippet environment below.)
$(function() {
$('#Alpha').on("submit", function() {
if ($("#Field").val().length == 0) {
alert("Please fill the box");
return false;
} else {
alert("Your code is saved");
return true;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="success.php" id="Alpha" method="post" onsubmit="return Captcha();">
<input id="Field" type="text" placeholder="Enter key here">
<button id="Button" type="submit" form="Alpha">Confirm</button>
</form>
You would want to validate the form fields when you actually submit the form. When you click on the button you are still in the process of triggering the submit.
Try changing this:
$('#Button').click(function() {
Into this:
$('#Alpha').on('submit', function() {
See if that helps.

cancel in confirm function submitting form in javascript

Got a form that requires users to input an amount to donate. On clicking submit, a function is called and the function is meant to display the amount specified and prompt the user to confirm if the amount typed is the actual amount or not.
The Cancel option in the Confirm() keeps submitting the form instead of returning false.
function donationFormSend(){
get_donation_amount = document.getElementById("get_donation_amt").value;
if(get_donation_amount != ''){
return confirm("You have specified "+get_donation_amount+" as the amount you wish to donate. \n\n Are you sure you want to proceed with the donation?");
}
else{
alert("Amount must be specified to process your donation.");
return false;
}
}
<form method="post" action="">
<div>
<div>Donation Amount:</div>
<input name="amount" type="text" id="get_donation_amt" required="required" />
</div>
<input name="donation_submit" type="submit" id="Submit" value="Proceed" onclick="return donationFormSend();" />
</form>
Jsfiddle link
Would be pleased getting help with this.
I updated your jsfiddle so it's in the expected format (loading the js in the head) and returning the confirm result
return confirm('blah blah')
works perfectly well for me in FF! Just make sure you clear your cache and reload your page.
A way to do do it might be:
form :
<form id='test' method="post" action="">
<div>
<div>Donation Amount:</div>
<input name="amount" type="text" id="get_donation_amt" required="required" />
</div>
<input type="submit" value="submit" onClick="form_submit(this.value)">
<input type="submit" value="cancel" onClick="form_submit(this.value)">
</form>
javascript:
document.getElementById('test').addEventListener('submit',function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
})
form_submit= function (submited_by) {
if(submited_by == 'submit'){
alert('Submited')
}else if (submited_by == 'cancel'){
alert('cancelled')
}
}
I'd rather use a switch statement to make it expandable in the future but this should work.
Also I'm using jquery mostly because I'm not sure how to stop default action without it.
here's a JSFiddle with the code running.
EDIT: Updated to not use Jquery.
EDIT: well, I feel stupid now, realised it wasn't cancel button in a submit form but in a confirmation form.
In your HTML use : onclick="return donationFormSend();"
In Your Javascript: return confirm("Are you sure ....blah blah blah")

Simple Javascript for form validation doesn't work

So, I have written this form and this simple javascript to validate the user input.
The thing is, it works perfectly until I add a third function, validateHash, that takes the hashtag inputed into the textbox and checks if it has an hashtag at the beginning.
I sent the code to a friend, and he said that on his PC it works fine (Checks if the fields are filled, and then checks if the hashtag is correct), while on mine it just skips every function and submits the data to the php page without checking anything.
I am using Firefox, and he's using Chrome, but I tried even with the latter with the same results.
Is there something wrong in the code itself?
<!doctype html>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<script language="JavaScript" type="text/javascript">
function validateForm() {
if(validate(document.form.song.value) && validate(document.form.hashtag.value))
if(validateHash(document.form.hashtag.value))
return true;
else
{
alert("Please fill all the fields");
return false;
}
}
function validate(text) {
if(text==null || text=="")
return false;
else
return true;
}
function validateHash(text) {
if(text.charAt(0) != "#") {
alert("Insert hashtag correctly");
return false;
}
else
return true;
}
</script>
<form action="format.php" name="form" method="post" class="basic-grey" onsubmit="return validateForm()">
<h1>Anisongs Form
<span>Fill all the text in the fields</span>
</h1>
<label>
<span>Song lyrics :</span>
<textarea id="song" name="song" placeholder="Max 120 characters" maxlength="120"></textarea>
</label>
<label>
<span>Anime hashtag :</span>
<input id="hashtag" type="text" name="hashtag" placeholder="#loghorizon" maxlength="20"/>
</label>
<span> </span>
<input type="submit" class="button" value="Submit" />
<input type="reset" class="button" value="Cancel" />
</form>
Well, the issues were the brackets. JS really fancies them, and without them even on single lines ifs it wouldn't start to work.

Checking for attachments in JavaScript

Prior to submitting a form, I would like to check if a file has been attached and pop up a warning message saying that a file needs to be attached if it hasn't been. I was wondering how to accomplish this using JavaScript or Prototype or JQuery etc?
Assuming you are using an <input type="file"> field, you can simply check if the element's value is a non-empty string:
<form method="POST">
<input type="file" id="attachment" />
<input type="button" onClick="checkAttachment();" value="Send" />
</form>
<script type="text/javascript">
function checkAttachment() {
if (document.getElementById('attachment').value !== '') {
alert('File Attached');
}
else {
alert('No File Attached');
}
}
</script>

Categories