Develop Reference

Another spambot prevention method

I know this question has been asked before but I didn't see the following solution anywhere else.
I have a website with a lot of forms and I'm looking for a way, without needing to edit the php for each form, to fend of the bots.
I'm proposing to use this but I wandered if anyone might have any thoughts or reasons why I should not?
<form method="POST" action="enableJavascript.html">
<!-- I change the action to a page to tell the user
that javascript is required-->
<input name="action" value="contact.php" type="hidden"/>
<!-- and add an input that contains the original action-->
<input name="name"/>
<input name="email"/>
<input type="submit" value="submit"/>
</form>
And here is the javascript / jQuery to handle posting the forms:
$(function() {
$('form').submit(function(e) {
var $this = $(this);
if (e.originalEvent) { // only change the action if the form was
// submitted via user input
e.preventDefault();
$this.attr('action', $('input[name=action]',$this).val());
$this.submit();
}
});
});
I guess this would fail if bots are known to 'click' buttons, but I don't know if that's the case?

This really won't work to stop bots and here's why. The bots will come in and scrape the field names from your form and then craft their own POST request. They're not going to see, let alone obey your JavaScript event stop.
What you should do is craft an AJAX page and have your form submit it that way. It makes it much harder for the bots to fill it out and submit because there's no <form action="page.php"> to follow. The other way is to install a captcha, like ReCaptcha

client-side form validation after clicking SUBMIT

I have 2 php files "source.php" and "target.php". In the source.php part I have,
<form method="POST" id="form1" action="target.php">
...
<input type="submit" name="submit" value="Submit"/>
</form>
When I click on submit it goes to the "target.php" (even if I have errors in the form), but I want that, only after all form fields are validated it will go to the target page, else it shows some kind of warning message and stays on the same page. Please help! Maybe this is a stupid question for some but I am a beginner. (I know how to do all the field validations and its working fine).

Duplicate of duplicate questions.Please search throughly before you post next time.
Generally javascripts are used for validation.But there are cases when javascripts become inefficient,for example when you need to validate country and its states.Its not practical to send the entire list of countries and states to the client. In such scenarios AJAX is used.By using AJAX the client sends the data to server immediatly after the user enters it.then it fetch only the required data.Its a simultaneous two way communication between client and server.for example if the user enters country name as INDIA,using AJAX states of INDIA are loaded for validation,thus saving bandwidth.
JavaScript and AJAX are not easy to learn,you must research try and correct different codes.Just google "JavaScript form validation"...
This is from w3Schools...
Required Fields
The function below checks if a field has been left empty. If the field is blank, an alert box alerts a message, the function returns false, and the form will not be submitted:
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
The function above could be called when a form is submitted:
Example
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
here is more basic examples http://www.w3schools.com/js/js_form_validation.asp
Good Luck

You can use AJAX to validate your form. JavaScript is not recommended for form validation.
A simple tutorial for AJAX Validation is available here
But be aware, even if you are validating your form before submission to target.php, always make sure that you check the data in target.php too. This is because JavaScript can be changed (thanks to the modern DOM interpreters) in the browser. It can be made so that the form is submitted without AJAX verification. So you should check it twice, before and after submission.
Also make sure to escape the data, as user input can never be trusted.
You should also user strip_tags($string) to prevent use from inserting php code.

JavaScript is most likely the easiest way to do this (read the other posts).
However, if you don't want to use JavaScript you could always check if all forms are set using isset() or something similar and then passing on the $_POST variables in the URL and grabbing those using $_GET. Of course make sure there isn't any sensitive information in the URL. In addition: you could always work with global variables.
Another way to do this without JavaScript is submit to a database after several checks (like escaping the strings etc.), perhaps even encrypt, but I don't suggest this since this is the long way around.

How can I make Alfresco YUI validate prepopulated input fields and avoid "keyup"?

I have a html form with some input fields that need validation:
<input type="text" id="hrs-edit-oib" name="oib">
I also have two validators on it. So with the new forms it works great. But with the prepopulated forms, it doesn't work.
I believe it is because the validators are set to work on a "keyup" event:
createEmployeeForm.addValidation("hrs-edit-oib", Alfresco.forms.validation.mandatory, null, "keyup");
Is there a way to tell the validator to process the form rigth away, if it has been prepopulated on the server side?
Here's an example:
I load a page with markup:
"<input type="text" name="myid" value="preloaded" id="myid" />
And lets say that the value of "myid" needs to be longer then two chars (which is the case here). But there was no keyup and my Save button is disabled until I click into that field and press tab or something.
Thanks

Submit Form Without Javascript

I have a form that relies on javascript to do all the client side form validation. The form is submitted via javascript if all the fields are correctly filled in as opposed to using a standard "submit" button:
<button name="button" type=button onclick="validateReqFields('mForm', 'username, password, compPassword, firstName, lastName');">Register</button>
document[formName].submit();
If the client has javascript disabled, all of the form validation is done server side (its actually performed again regardless but that doesn't really matter). The problem lies with using a button with a type of button instead of submit. It works perfect with javascript, but how do I get around this when javascript is not available? If I use a submit button along with the javascript then it submits the form with each button press and doesn't work properly.

Use a submit button instead of the "button" button, and then have your validateReqFields function return false if the form is not valid.
Then take out the form submit from the validateReqFields if you like.
This way
If the form is valid, then the button click will bubble and the form will submit
If the form is invalid, then the javascript will cancel the button click
If javascript is disabled, then it will be submitted to the server as a fallback

Change the type attribute to submit.
<button name="button" type="submit" ... />

Use the <noscript></noscript> tags to define a "normal" submit-button when javascript is disabled.

You could maybe use the <noscript> tag and encapsulate the above code with the button type as submit. If the client has js, the code inside the noscript will be ignored.

Is there a better jQuery solution to this.form.submit();?

I want to trigger the submit event of the form the current element is in. A method I know works sometimes is:
this.form.submit();
I'm wondering if there is a better solution, possibly using jQuery, as I'm not 100% sure method works in every browser.
Edit:
The situation I have is, as follows:
<form method="get">
<p><label>Field Label
<select onchange="this.form.submit();">
<option value="blah">Blah</option>
....
</select></label>
</p>
</form>
I want to be able to submit the form on change of the <select>.
What I'm looking for is a solution that works on any field within any form without knowing the id or name on the form. $('form:first') and $('form') won't work because the form could be the third on the page. Also, I am using jQuery on the site already, so using a bit of jQuery is not a big deal.
So, is there a way to have jQuery retrieve the form the input/select/textarea is in?

I think what you are looking for is something like this:
$(field).closest("form").submit();
For example, to handle the onchange event, you would have this:
$(select your fields here).change(function() {
$(this).closest("form").submit();
});
If, for some reason you aren't using jQuery 1.3 or above, you can call parents instead of closest.

this.form.submit();
This is probably your best bet. Especially if you are not already using jQuery in your project, there is no need to add it (or any other JS library) just for this purpose.

I have found that using jQuery the best solution is
$(this.form).submit()
Using this statement jquery plugins (e.g. jquery form plugin) works correctly and jquery DOM traversing overhead is minimized.

Similar to Matthew's answer, I just found that you can do the following:
$(this).closest('form').submit();
Wrong: The problem with using the parent functionality is that the field needs to be immediately within the form to work (not inside tds, labels, etc).
I stand corrected: parents (with an s) also works. Thxs Paolo for pointing that out.

You can always JQuery-ize your form.submit, but it may just call the same thing:
$("form").submit(); // probably able to affect multiple forms (good or bad)
// or you can address it by ID
$("#yourFormId").submit();
You can also attach functions to the submit event, but that is a different concept.

Your question in somewhat confusing in that that you don't explain what you mean by "current element".
If you have multiple forms on a page with all kinds of input elements and a button of type "submit", then hitting "enter" upon filling any of it's fields will trigger submission of that form. You don't need any Javascript there.
But if you have multiple "submit" buttons on a form and no other inputs (e.g. "edit row" and/or "delete row" buttons in table), then the line you posted could be the way to do it.
Another way (no Javascript needed) could be to give different values to all your buttons (that are of type "submit"). Like this:
<form action="...">
<input type="hidden" name="rowId" value="...">
<button type="submit" name="myaction" value="edit">Edit</button>
<button type="submit" name="myaction" value="delete">Delete</button>
</form>
When you click a button only the form containing the button will be submitted, and only the value of the button you hit will be sent (along other input values).
Then on the server you just read the value of the variable "myaction" and decide what to do.

In JQuery you can call
$("form:first").trigger("submit")
Don't know if that is much better. I think form.submit(); is pretty universal.

<form method="get">
<p><label>Field Label
<select onchange="this.form.submit();">
<option value="blah">Blah</option>
....
</select>
</label>
</p>
**<!-- <input name="submit" type="submit" /> // name="submit_new_name" -->**
</form>
<!--
this.form.submit == this.form.elements['submit'];
-->