I validate user input twice actually. While user is typing I check the input to provide some feedback to the user.
When the user submits the form I validate the input again to check whether the input is correct.
I think using both would cause redundancy and I would like to avoid that.
Is it correct to have just the first validation method? What do you think?
One thing you will definitely miss if you only validate while the user is typing is empty fields.
I think the best of both worlds is to add a "valid" class to valid inputs in your as-you-type validation. Then on submit, skip checking the inputs that have this class.
That said, client-side validation is mainly for the user experience. Server-side validation can always pick up on and notify the user of any errors the client-side validation missed. So it is up to you here to decide how much the client-side validation should do based on your form.
I think you should Just validate on onblur() event for each field (Enough for client side).
And also validate on Server side , can't trust user input .
Related
So I have page with simple form. To submit this form I need person submitting to check checkbox (some privacy policy etc).
I have the form like this:
<form role="form" class="form" id="zamowienie" action="send_order.php" method="post">
<button type="button" id="wyslijZamowienie">SEND</button>
<input type="checkbox" id="regCheckbox" value="">
</form>
(Of course, every distracting inputs are deleted.)
Then I have script that shall submit form only after checking the checkbox.
button.on("click",function(){
if ($("#regCheckbox").is(":checked")) $("#zamowienie").submit();
Unfortunately, I found out that user can change localy the button type from "button" to "submit" and he will be able to submit the form ignoring my submit protect script.
And additional question. I am not an expert but I started wandering what else can do user with FireBug or dev tools. Can he perform any attacks this way?
Many thanks for any answers or guidance.
The user is able to change your form in many other ways, not just changing the type attribute of the button, the best is to check it on the server side too, for example, you should do something like this:
Validate via Jquery:
$("#zamowienie").submit(function(e) {
if(!$('input[type=checkbox]#regCheckbox:checked').length) {
//stop the form from submitting
return false;
}
//Continue and submit the form
return true;
});
Validate in the backend:
If you are using PHP in the backend for example, you have to check if the checkbox is checked, with something like this:
Note: Your checkbox need a name attribute, let's say mycheckbox
if (isset($_POST['mycheckbox'])) {
//Process your form
}
else{
//Checkbox was not checked, print an error message or something
}
Always validate your code in the backend, the Javascript validation is just a plus for usability and User Experience.
That's one of the reasons why you always validate on the server.
There's no problem validating on the FrontEnd, but you need a double check from the server so you guarantee that all the data is as you expected.
As for the Firebug/Chrome Dev Tools question, anyone can pretty much edit everything from your FrontEnd. From CSS to JS. Even if you minify it!
Consider that the user can do everything he wants. He can modify everything in your form or even create another one targeting the same url and create a script to submit it 1000 times.
That's why you often read :
Never Trust User Input
This means you have to check the whole request on server side : check the method used, check that the fields you are expected are set with data types that you expect.
To summarize : Front end is just here to help the "usual" user to communicate with your server, but on server side (back end), you have to expect every input possible.
Before submitting a form, i use javascript code (surrounded in PHP) in order to make locally some controls but sometimes javascript may not be enabled client-side.
The fact is that I have to check by pattern/regex each control of the form for example checking email, phone number,.. format so that user cannot enter anything haphazardly. Therefore, if javascript is not enabled, the form must not be submitted, even if all field are fulfilled out.
Therefore my question is to know if there is a tag or function which allow to perform what i want to?
Thank for your help
JavaScript runs client-side.
That means that users have FULL CONTROL over it.
Then, if they want to disable it, you can't do anything about it.
The only thing you should do is be sure that users with JS disabled will be able to submit the form too.
If you use JS to validate the form, be aware that users have FULL CONTROL over it, so they can send the form if they want, even if your code says that it's invalid.
The right way to do it is:
Be sure users without javascript can send the form
Implement client-side validation for users with javascript activation. This way they will have a better user experience (because can know if the data is invalid immediately) and is less server intensive (your server will have to validate less invalid forms).
ALWAYS validate the submited form server-side. Data coming from a client is always UNTRUSTED, even if you think you have validated it.
I want to use JavaScript to detect if a webpage has a login form or not in order to autofill the user's credential. I'm thinking of checking if there is an input with id="username"/"id",
however each website will have its own naming convention. What is the proper way to implement this?
I think the best way is to search for an input of type password. They are used only almost solely for logins. But you will also need to distinguish between login and signup forms. One way of doing it is counting the number of password inputs. Most signups have 2 password inputs to confirm. But this is less sure. You will probably need more filters. Maybe also try to find the words "signup" or "login" enclosed in the form tag, or immediately preceding it.
There is no one sure way. You'll have to use your ingenuity.
I also had to undergo the same scenario. I used following criteria to detect whether login panel exists or not.
By checking whether type="submit" (if login panel exists, in most cases form should be there to submit the data) and type="password" (password need to exists in order to capture the password typing in hidden manner).
But still there is no proper way. You need to come up with your filters.
I have a password field that, because it has it's field name inside it, begins as an input="text". When the user types or clicks on it, the field swaps out to input="password".
Some of our users store their username/password into a 3rd party program. Because the password is being written into the field via one of their functions, my password field isn't swapping out to a password because there's no event firing against it.
The third party folks aren't on the ball and really just said, "tough".
I was thinking of doing a setInterval to check the contents, but this will not be immediate enough.
Does anyone if any event fires if the contents of an input field is changing via a function. Again, I have no control over the function that is inputting the password.
Any suggestions would be a help. I feel as if this is a lost cause. BTW, I can't use jQuery because it's not an approved technology on our site. But, if there is a jQuery solution, I can see what I can do.
For your situation, you could reverse your logic. You can start the field as "password", then on setTimeOut, check if it has a value of 'password'. If it does, set it to "text".
(You could further use 'onchange' and backend validation to disallow the word password as a password)
I've been googling phrases like "form validation javascript" and "form validation ajax" but I only find code involving form validation upon the form submission. I want to write code that determines whether the field has valid input right when the user is inputting the data. How do I go about this?
You can use the jQuery Validation Plugin, which does both.