We Keep Coding

How to avoid onsubmit="return validateForm()" to submit the form when the validateForm() have a bug?

How to avoid onsubmit="return validateForm()" to submit the form, when the validateForm() have a bug?
<form action="index.php" method="post" name="eform" onsubmit="return validateForm();">
<input type="text" name="text" Maxlength="10000" />
<input name="" type="submit" value="submit"/>
</form>
<script>
function validateForm() {
if (dosomething) {
return true;
} else {
return false;
}
}
</script>
But when function validateForm() have some code error, such as...
function validateForm() {
ifffffffffffff(dosomerthing) { // Creates an error
return true;
} else {
return false;
}
}
The form is submitted automatically...
It displays 1 sec in Chrome console, how can I avoid this???
Thank you very much!

Update:
var from = document.getElementById('form');
form.addEventListener('submit', validateForm);
function validateForm(event) {
try {
error
} catch(err) {
console.log(err);
event.preventDefault();
}
}
<form action="index.php" method="post" name="eform" id="form">
<input type="text" name="text" Maxlength="10000" />
<input name="" type="submit" value="submit"/>
</form>

If I understand your question correctly you want to execute or stop executing the form method with an condition?
if so take a look, it may help you to get going.
function validateForm() {
var val ="errrrr"; // place your error here.
if(val == "err")
{
alert("submit form");
}
else
{
alert("don't submit the form"); //do what you want to do.
}
}
<form action="index.php" method="post" name="eform" onsubmit="return validateForm();">
<input type="text" name="text" Maxlength="10000" />
<input name="" type="submit" value="submit"/>
</form>

Validate on submit button got issue

Here is my code example
<form action="next2.php" method="post" name="next2" id="next2" onsubmit="return submitForm();">
Below is my function
<script type="text/javascript">
function submitForm()
{
var name = document.getElementById("name").value;
return false;
}
</script>
On press, the form still submit, but if i change
onsubmit="return false;"
then the form won't submit, how do I use the function to return false as i need do some if else validation

<script type="text/javascript">
function submitForm() {
return false;
}
</script>
<form
action="next2.php"
method="post"
name="next2"
id="next2"
onsubmit="return submitForm();"
>
submit is already a function for the form, you should call your JavaScript function something different, for instance submitForm as in the above.

just remove the semicolon in your function and place a alert in your function to make sure whether the function is called first.and then try to add validation

I like to make an invisible button for the actual submit which is only triggered after form validation:
function validate() {
var valid = true;
$.each($('input'), function(){
valid = valid && $(this).val().length > 0;
})
if (valid) {
$('#realSubmit').click();
} else {
alert('Please fill out all fields!');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="next2.php" method="post" name="next2" id="next2" onsubmit="return submit();">
<input type="text" placeholder="Enter Name" />
<input type="password" placeholder="Enter Password" />
<button type="button" onclick="validate()">Submit</button>
<button type="submit" id="realSubmit" style="display:none"></button>
</form>

Html form submit Check string

Need to setup an HTML Form, if entered value match given value then ACTION1 else ACTION2
i have 2 pages m1.htm & m2.htm, my value is 12345, if form submit 12345 open m1.htm if wrong open m2.htm.
<form name="input" action="m1.htm" method="post">
<input type="text" name="q"><input type='submit' value='Search'/>

try this
<form name="input" action="" method="post">
<input type="text" name="q">
<input type='submit' value='Search' id='search'/>
<script>
$(document).ready(function(){
$("#search").click(function(){
if($("input[name='q']").val() == 12345){
document.forms[0].action="m1.html";
document.forms[0].submit();
return true;
}else{
document.forms[0].action="m2.html";
document.forms[0].submit();
return true;
}
});
});
</script>
http://jsfiddle.net/6ftjhm88/

You should try to do it yourself first then ask the question not just ask for the code.
Code Snippet:
<form name="input" action="m1.htm" method="post">
<input type="text" name="q"><input type='submit' value='Search' id='submit'/>
</form>
<script>
$(document).ready(function()
{
$('#submit').on('click', function(e)
{
e.preventDefault();
e.stopPropagation();
if($('input[type="text"][name="q"]').val() == "")
{
alert('Please Enter a Value!');
return false;
}else if($('input[type="text"][name="q"]').val() == "12345")
{
window.location.href = 'm1.htm';
}else {
window.location.href = 'm2.htm';
}
});
});
</script>

Just use location.replace() function to load your html file according to your condition
i.e
if(value=12345)
location.replace('/m1.htm')
else
location.replace('/m2.html')

Checkbox validation not working

I have some javascript that is supposed to validate a checkbox (making it mandatory) but my form regardless of whether it is checked or not just submits, here is my code :
<script>
function validateCheckBoxes(theForm) {
if (!theForm.declare.checked) {
alert ('You must tick the checkbox to confirm the declaration');
return false;
} else {
return true;
}
}
</script>
<form name="form" method="POST" action="<?php echo $_SERVER["PHP_SELF"];?>" id="eoi" onsubmit="return validateCheckBoxes(this);">
<input type="checkbox" name="declare" id="declare">
<input type="submit" name="submit" id="submit" value="submit">
</form>
Any ideas on why it isnt working?

<script type="text/javascript">
function validateCheckBoxes(theForm)
{
if (!theForm.declare.checked)
{
alert ('You must tick the checkbox to confirm the declaration');
return false;
} else {
return true;
}
}
</script>
<form name="form" method="POST" action="<?php echo $_SERVER["PHP_SELF"];?>" id="eoi" onsubmit="return validateCheckBoxes(this);">
<input type="checkbox" name="declare" id="declare">
</form>
As #shin mentioned, you need to specify the object of the form during the function call.
theForm.declare.checked returns true or false there is no need to check the value with == operator. Just use it directly (User ! depending on need - to negate the result)

change your function call like
return validateCheckBoxes(this);
Eg:
<form name="form" method="POST" action="<?php echo $_SERVER["PHP_SELF"];?>" id="eoi" onsubmit="return validateCheckBoxes(this);">
Because theForm should refer an object

<script>
function validateCheckBoxes()
{
if (document.getElementById('declare').checked == false)
{
alert ('You must tick the checkbox to confirm the declaration');
return false;
} else {
return true;
}
}
</script>
<form name="form" method="POST" action="<?php echo $_SERVER["PHP_SELF"];?>" id="eoi" onsubmit="return validateCheckBoxes();">
<input type="checkbox" name="declare" id="declare" />
<input type="submit" name="submit" value="submit" />
</form>

Here is a what I tried and worked for me
<script type='text/javascript'>
function validateCheckBoxes()
{
if (document.forms[0].declare.checked == false)
{
alert ('You must tick the checkbox to confirm the declaration');
return false;
} else {
return true;
}
}
</script>
<form name="form" method="POST" action="yourURL/search" id="eoi" onsubmit="return validateCheckBoxes();">
<input type="checkbox" name="declare" id="declare"/>
</form>
I don't think you need to pass the reference of the form object to the function.

If was not alert go to url else do not go

I want make validation jquery without using from plugin, problem is here that after click on button and get alert(if field is empty) it go to url # that there is in <form action="#"....
I want if get alert(mean if field is empty) 'input is empty' not go to url that there is in ...action="#"..., if filed has value it go to url. i can not use from ajax call or preventDefault or window.location(Because one from field is input:file).
Example: http://jsfiddle.net/gb7nh/1/
How can fix it?
<form action="#" method="POST">
<input type="text" name="name">
<button id="cli">Submit</button>
</form>
$('#cli').live('click',function(e){
//e.preventDefault();
if($('input[type="text"]').val()=='')alert('input is empty')
})

Bind to form submittal instead, and return false to prevent the form from submitting.
<form action="#" method="POST" id="myform">
<input type="text" name="name">
<button id="cli">Submit</button>
</form>
$('#myform').submit(function() {
var valid = true;
$('input[type="text"]').each(function() {
if ($(this).val().length == 0) {
alert('A field is empty!');
valid = false;
return false;
}
});
if (!valid) {
return false;
}
});

This should do the trick for you:
<button id="cli" onclick="return clickButton();">Submit</button>
And it's corresponding JavaScript
function clickButton(){
if($('input[type="text"]').val()==''){
alert('input is empty');
return false;
}
}

Probably you need to return false in case when you show alert woth errors:
$('#cli').live('click',function(e){
//e.preventDefault();
if($('input[type="text"]').val()=='')
{
alert('input is empty');
return false;
}
});
Code: http://jsfiddle.net/gb7nh/2/

I wolud do it like Elliot. Only i would have used:
<form action="#" method="POST" id="myform">
<input type="text" name="name">
<button id="cli">Submit</button>
</form>
$('#myform').submit(function() {
if (!$('input[type="text"]').val()) {
alert('input is empty');
return false;
}
});
This.
if (!$('input[type="text"]').val())
Instead of:
if ($('input[type="text"]').val()=='')