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.
Related
I am confused about some behaviour on my webpage where I use both submit action and onclick event on the Save-button in a form. It works fine for me, but it seems that some users have trouble to save the information in the form.
I have simplified the form here:
<div class="container">
<form id="myform" action="action.php">
<input "nameinput" type="text" name="name">
<button id="savebutton" type="submit" >Save</button>
</form>
</div>
Now... I have also added an jQuery section that shall hide the form when the save button is pressed:
$(".container").on("click", "#savebutton", function(){
$("#myform").slideUp("slow", function() {
$(this).remove();
});
});
So: When the user presses the Save-button it shall both send the name to action.php and trigger the click-event to close the form.
This works perfectly fine for me, but I wonder if this design can cause troubles on some browsers, especially older ones? I have got bug reports from users where the form is closed, but no data is saved (i.e. action.php isn't called). Is it possible that the form "dissapears" before the form can submit the data?
Here the default behavior of the submit button is to send the data to action.php. Definitely, it is going to load the page again when users click the submit button in that case your javascript code will not run.
I will recommend you to use JQUERY AJAX Documentation
I have been building a chrome extension and I have been using content scripts to listen for the form submit event. I was testing my extension and it works pretty well, until I tested on a site that didn't work. The reason it didn't work is because the form button isn't really a form button with the submit action. It's actually an <a> tag with an href tag that links to "javascript:;", so the submit event doesn't trigger. The link is inside a form, it's just not a button tag with the submit action. How can I make sure that my content script triggers whenever a user tries to submit a form?
It seems simple at a glance, but there's no surefire way to achieve what you're asking.
Consider this:
document.getElementById('myform').addEventListener('submit', function(e) {
e.preventDefault();
console.log(document.getElementById('sometext').value);
console.log('form submitted');
});
document.getElementById('notasubmitbutton').addEventListener('click', function(e) {
console.log(document.getElementById('sometext').value);
});
<form id="myform">
<input type="text" id="sometext">
<input type="submit">
<button id="notasubmitbutton" type="button">Submit 2</button>
</form>
There's the regular submit button that will trigger the submit event. Then there's another button, that will just collect all the data from the form, but will not submit it in the traditional sense.
There's absolutely no way you could foresee all the possible ways someone could build their form, so what you're asking for can't be done.
I have the super awesome jQuery validate and form plugins working all over my site without problems. Unfortunately, for one of my forms I have this weird problem where no form data gets submitted regardless of what I type into the form's textboxes.
To show you what I mean, when I console.log the field data before typing ("stored data") and upon submission ("live data") this is what I get (serialized using $.param):
stored data: full_name=&email_address=&password=
live data: full_name=&email_address=&password=
So nothing is being submitted on this form, whereas the "live data" for all other forms on my site which use the exact same JS codebase display whatever is inputed.
UPDATE Here's a JSFiddle for this form.
UPDATE 2 I'm realizing that this form's elements aren't being recognized by Javascript. So the background doesn't turn red if I do this.
$('#email_address').focus(
function(){
$(this).css({'background-color' : 'red'});
});
Wow this is totally confusing, thoughts?
You have
$(document.body).on('click', ".ajaxFormBtn"
and
<button data-loading-text="Saving..." class=" btn btn-green btn-large txt24"
value="Sign up" id="signupModalBtn" ><i class="icon-key icon-signin"></i>
Sign up</button>
Notice anything missing from the button's class attribute?
I need a javascript code to prevents bots from submitting forms.
But i need a client side code in javascript that work like CAPTCHA but don't call the server
thank you
Most straight forward and simple way will be to add or edit form data on the fly when the button is actually clicked:
<input type="hidden" name="SubmittedByHuman" value="NO" />
<input type="submit" value="Submit me" onclick="this.form.elements['SubmittedByHuman'] = 'YES';" />
Having this, on the server side check the value of form element called "SubmittedByHuman" - if it will be "NO" it means something bypassed the submit button - or as people mentioned correctly in comments, user did click but has disabled JavaScript.
do something like
<h1>Type the result in the input box : 1+1</h1>
<input id="sum" type="text"/>
and before submitting you check if the value in the input is 2 and then submit it.
To improve this type of code you could randomly create these 2 values in the h1 and save them into a var and before submiting check if input and sum are the same.
I doubt this is possible, as bots are sophisticated enough to bypass most things.
Remember, the bot isn't going to open the webpage in a browser and press submit. It'll probably scan the page for a <form>, make a list of all the <input> fields, and perform a POST request containing all the data for each one.
It won't run any javascript, or press any buttons. You'll have to make the check server-side.
I'm writing form and adding html5 validation attributes to its input like "required", "autofocus". I use Javascript to submit the form using document.myForm.submit() but it doesn't validate the form against the html5 validation attributes as they aren't there.
Any Suggestions?
It appears that triggering a click on the submit button does have the correct effect: http://jsfiddle.net/e6Hf7/.
document.myForm.submitButton.click();
and in case you don't have a submit button, add an invisible one like:
<input type="submit" style="display:none" name="submitButton">
The pimvdb's answer is based on a workaround to include a hidden submit button.
HTML5 provides javascript functions to achieve the same thing without a submit button. As Tigraine pointed out, Mozilla documents two validity checking methods for 'form' elements:
checkValidity() return true/false and doesn't show anything to the end user
reportValidity() return true/false and ALSO shows the validation messages to the end user (like the normal submit button click does)
<!DOCTYPE html>
<html>
<body>
<form name="testform" action="action_page.php">
E-mail: <input type="email" name="email" required><br/>
Report validity<br/>
Check validity<br/>
Submit
</form>
</body>
</html>
Why not simply call the validation manually before you do document.myForm.submit()
What validation framework do you use and what AJAX library?
In case you use jQuery here is the code to prevent the submit:
$('#myForm').submit(function(evt) {
if (! $('#myForm').validate()) {
evt.preventDefault();
}
});
And trigger the submit through:
$('#myForm').submit();
This would call the validation whenever submit is triggered.. And if the validation fails it prevents the submit from executing.
But I'd look at your validationframework as it usually should do this already
In case you don't use any JavaScript framework you may want to have a look at: element.checkValidity(); and how to invoke the HTML5 validation from JavaScript before even calling submit.