please help me out on this, I realy don't figure out where is the problem.
my code:
function validateForm()
{
var pic = document.getElementById("photo1").value;
pic = pic.split('/').pop().split('\\').pop().replace(/[.][^.]+$/, "");
var x = document.getElementById("gyuruszam");
var gyuru = document.getElementById("gyuruszam").value;
if (gyuru == null || gyuru == "" || gyuru == " ")
{
alert("Gyűrűszám nélkül nem lehet adatot lementeni!");
x.focus();
x.style.borderColor="#C30";
return false;
}
if ((gyuru != pic) && (pic != NULL)){
alert("A kép neve nem egyezik meg a gyűrűszámal!");
return false;
}
}
I don't know why is executing the second if, if I do not select file on the field.
I just want an if condition, if I select file and the gyuru is not equal with the name of the file, then return false with an error message. But if I don't select a file return true(ornot even entering in the loop)
Thank you in advance!
EDIT:
I also try this way:
function validateForm()
{
var pic = document.getElementById("photo1").value;
pic = pic.split('/').pop().split('\\').pop().replace(/[.][^.]+$/, "");
var x = document.getElementById("gyuruszam");
var gyuru = document.getElementById("gyuruszam").value;
if (gyuru == null || gyuru == "" || gyuru == " ")
{
alert("Gyűrűszám nélkül nem lehet adatot lementeni!");
x.focus();
x.style.borderColor="#C30";
return false;
}
else if ((gyuru != pic) && (pic != NULL)){
alert("A kép neve nem egyezik meg a gyűrűszámal!");
return false;
}
}
it's working, but not like I want, because if I upload a file with different name, not equal with gyuru it's return true.
my form data is:
<form...
<input type="text" id="gyuruszam" name="gyuruszam"/>
<input type="file" id="photo1" name="photo1"/>
../form>
AND i CHECK THE RETURNED FILE NAME pic IT'S CORRECT!
I'm sorry I'm not sure of what you want.
Your code has a mistake, NULL does not exists, you should put null.
Second problem: pic cannot be null, it will be an empty string if you don't select a file.
So I guess you are looking for:
} else if ((gyuru != pic) && (pic != null) && (pic != '')) {
Try it here: http://jsfiddle.net/nyothecat/ALjGJ/
Related
I am trying to validate my form using javascript. I want that if a user leaves an input field empty then he will see an alert and the form will not submit data to php file. Unfortunatlly, the code below is not working for me. javascript is not executing on form submit.
javascript
<script>
function MyForm() {
var x =document.forms["myForm"]["name"].value;
if (x == null || x == "") {alert("Name must be filled out");
return false;
}
{ var y=document.forms["myForm"]["age"].value;
if (y == null || y == "") {
alert("age must be filled out");
return false;
}
}
form
<form name="myForm"action="game.php"onsubmit="return myForm()"method="post">
Name: <input type="text" name="name">
Age: <input type="text" name="age">
<input type="submit" value="Submit">
</form>
Any help is greatly appriciated.
You've got a couple typos in your code. A good way to find them is to use the console in the developer tools of your browser (try pressing F12).
Change
{ var y=document.forms["myForm"]["age"].value;
to
var y=document.forms["myForm"]["age"].value; //removed the opening curly brace
and in your form change:
onsubmit="return myForm()"
to
onsubmit="return MyForm()"
you have to invoke myForm function first to make it work
function MyForm() {
var x =document.forms["myForm"]["name"].value;
if (x == null || x == "")
{alert("Name must be filled out");
return false;
}
var y=document.forms["myForm"]["age"].value;
if (y == null || y == "") {
alert("age must be filled out");
return false;
}
}
MyForm(); // invoke it here
There are 2 typo issue in your javascript method. Try below method
function MyForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
}
var y=document.forms["myForm"]["age"].value;
if (y == null || y == "") {
alert("age must be filled out");
return false;
}
}
I have a registration form page, and there is empty div i want to use to display errors. To check forms before triggering php script i use javascript:
function errorHandler(){
var loginIn;
var passIn;
loginIn = document.forms["regForm"]["login"].value;
passIn = document.forms["regForm"]["password"].value;
if (loginIn == "" || loginIn == null) {
alert("LOGIN CANNOT BE EMPTY");
return false;
}
}
It works fine, and alert message do appear when i call them like this:
<form name="regForm" action= "save_user.php" onsubmit="return errorHandler()" method="post">.
But there is as i mentioned before a div inside of the form: div id ="errorArea"></div> and when i try to put a text inside of this div like this:
function errorHandler(){
var loginIn;
var passIn;
var erorAreaMessage;
loginIn = document.forms["regForm"]["login"].value;
passIn = document.forms["regForm"]["password"].value;
erorAreaMessage = document.getElementById('errorArea').textContent;
if (loginIn == "" || loginIn == null) {
erorAreaMessage = "LOGIN CANNOT BE EMPTY";
return false;
}
}
Nothing happens, can someone explain me why?
You need to put the value inside the <div>. That can done by setting the innerHTML or textContent property to your error-message.
Try this -
...
if (loginIn == "" || loginIn == null) {
document.getElementById('errorArea').textContent = "LOGIN CANNOT BE EMPTY";
return false;
}}
I can't figure out why this is not working as i did everything correct.
This is a simple create a account form. I put validation code for some of the field like name, email and password. There are many other fields. but first i m trying this.
The like is here:
jsfiddle
and the code of HTML:
First Name
<input type="text" name="fname" id="fname"/>
<input type="text" name="lname" id="lname />
<input type="text" name="remail" id="remail" />
New Pasword
<input type="password" name="rpass" id="rpass" />
<input name="regis" type="submit" class="color2" id="id" value="Submit" />
The javascript code here:
function validateRegis() {
//regex for fname and lname
var fname = $("#fname").val();
var lname = $("#lname").val();
var patt_n = /[a-z]{2,20}/i;
//checking fname and lname for regex matching
var ftest = patt_n.test(fname);
var ltest = patt_n.test(lname);
var remail = $("#remail").val();
var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9\_\.\-]+[a-zA-Z0-9\_\-]+#[a-zA-Z0-9]+[a-zA-Z0-9\.\-]+[a-zA-Z0-9]+\.[a-z]{2,4}$/;
var test = filter.test(remail);
var rpass = $("#rpass").val();
var patt = /[a-z0-9~!##$%^&*()_\ ]/i;
var test2 = patt.test(rpass);
if (fname === "" || ftest === false) {
alert("Please provide first name!");
$("#fname").focus();
return false;
} else if (lname === "" || ltest === false) {
alert("Please provide Last name!");
$("#lname").focus();
return false;
} else if (remail === "" || test === false) {
//
alert("Please provide email in correct format!");
$("#remail").focus();
return false;
} else if (rpass === "" || rpass.length < 8 || test2 === false) {
alert("Please provide password!");
$("#rpass").focus();
return false;
} else if ((fname !== "") & (lname !== "") & (remail !== "") & (test === true) & (rpass >= 8) & test2 === true) {
return true;
}
}
It needs jquery to run the code.
The problem is the validateRegis function is not available in the global scope.
In the fiddle UI left side panel, 2nd select box select No Wrap in body, it works fine.
Demo: Fiddle
When you select onLoad there, all the scripts under the script frame is wrapped under a anonymous function, so your validateRegis method becomes a local member of that anonymous function. Thus that function will not be available when the function submit is called causing an Uncaught ReferenceError: validateRegis is not defined error being thrown.
Now the form is one form, here is the new broken code
<script language="javascript" type="text/javascript">
function verifyIt(){
if((document.form1.baseline_08.value != "" && Number(document.form1.baseline_08.value) && document.form1.baseline_08.value != "-1")){
if((document.form1.baseline_09.value != "" && Number(document.form1.baseline_09.value) && document.form1.baseline_09.value != "-1")){
document.form1.submit();
return true;
}else{
alert("Please select how old you were when you started smoking every day.");
return false;
}
}
function submit2(){
document.form1.direction.value = "back";
document.form1.submit();
}
</script>
Now the verify doesnt work at all. I just dont see what is wrong with this now.
The problem I am having is the form1 is the only one being recognized. I believe it is because of my if statement structure. Basicly I only get the return from the form1. What is wrong with my js?
I believe it is because of my if statement structure.
Yes, you are always returning after checking form1. However, you cannot submit multiple forms at a time, so you should combine them into one. Then use
function verifyIt() {
if(!(document.form.baseline_08.value == "" && Number(document.form.baseline_08.value) && document.form.baseline_08.value != "-1")){
alert("Please select how old you were when you started smoking every day.");
return false;
}
if(!(document.form.baseline_09.value != "" && Number(document.form.baseline_09.value) && document.form.baseline_09.value != "-1")){
alert("Please select when you would smoke after waking up.");
return false;
}
document.form.submit();
}
I have a function for a button which submits a form. This function checks to see if the 5 checkboxes are selected #co1,#co2,#co3,#div1,#cc1.
It then also checks to see if tcaccept select is set to 1.
If so the form submits, else the alert pops up.
This is the code i have at the moment:
$('#submit2pd').click(function(event) {
var $finishBoxes = $('#co1,#co2,#co3,#div1,#cc1');
if (!($finishBoxes.length == $finishBoxes.filter(':checked').length && $('#tcaccept').val() == '1' )) {
alert('Please complete the Induction Checklist confirming that you have read and understood the Colleges main policies and procedures, agreeing to comply with these in line with the terms of your contract with the College');
return false;
}
// otherwise the form is submitted
window.location.href = "submit2pd.php";
});
All works brilliantly, but i want to add to this line as i have another option that is required. But this needs to be an if statement.
if (!($finishBoxes.length == $finishBoxes.filter(':checked').length && $('#tcaccept').val() == '1' && THE IF STATEMENT))
this is what i need to incorporate into the if statement above.
if ($("#ctl").val() == "1") {
$('#ctlapp') must not be blank
}
else if ($("#ctl").val() == "0") {
$('#ctlapp') can be blank
}
Any help would be greatly appreciated.
How about:
if (!($finishBoxes.length == $finishBoxes.filter(':checked').length &&
$('#tcaccept').val() == '1' &&
!($("#ctl").val() == "1" && $('#ctlapp').val() === "")))
What we're adding here is another condition which says, "And make sure it's not the case that #ctl is 1, and #ctlapp is blank".
Edit: and please see my comment above - your question is not about jQuery, forms, or validation. It's barely about JS.
if($('#tcaccept').val() == '1' && validate()) {
// do something
}
var validate = function(){
if ($("#ctl").val() == "1") {
$('#ctlapp') must not be blank
return false;
}
else if ($("#ctl").val() == "0") {
$('#ctlapp') can be blank;
return true;
}
return true;
}
I'd say clean up the code a little, and things will get a bit simpler:
$('#submit2pd').click(function(event) {
var fail_message = 'Please complete the Induction Checklist confirming that you have read and understood the Colleges main policies and procedures, agreeing to comply with these in line with the terms of your contract with the College',
$finishBoxes = $('#co1,#co2,#co3,#div1,#cc1'),
$checkedBoxes = $finishBoxes.filter(':checked'),
tcaccept = $('#tcaccept').val(),
ctl = $("#ctl").val(),
ctlapp = $('#ctlapp').val();
if (tcaccept == '1' && $finishBoxes.length != $checkedBoxes.length ) {
alert( fail_message );
return false;
} else if( ctl == "1" && ctlapp == "" ) {
alert( "some other message" );
return false;
}
// otherwise the form is submitted
window.location.href = "submit2pd.php";
});
I left the test for $('#ctl').val() == "0" out because it sounds like that's the only other value it can have, and there's no validation that needs to take place if it is "0".
Use a logic or || to capture both constalations:
$("#ctl").val() == "1" && $('#ctlapp') != ""
OR
$("#ctl").val() == "0"
if (
!(
$finishBoxes.length == $finishBoxes.filter(':checked').length
&&
$('#tcaccept').val() == '1'
&&
(
($("#ctl").val() == "1" && $('#ctlapp') != "")
||
$("#ctl").val() == "0"
)
)
)