How to prevent fake form validation

Question

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.

Answer 1

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.