使用表单验证覆盖所有基础，客户端/服务器 - 什么是最好的方法？

Question

I know there are many methods of validating forms on both client and server side but I was wondering what was the best practice?

Currently, I have Javascript functions validating form input fields 'on the fly' with onkeyup/onblur functions like so:

(Partial code:)

<p class="form-registerUserName">
    <div class="upperLabel">
        <label for="registerUserName">User Name</label>
        <span class="required">*</span>
    </div>
    <input
        id="registerUserName"
        name="registerUserName"
        type="text"
        size="24"
        maxlength="24"
        value="<?php echo $_SESSION['registerUserName'];?>"
        onkeyup="validateName()"
        onblur="checkDuplicateName(); validateName()"
    >
    <label for="registerUserName" class="hint" id="registerUserNameHint"></label>
</p>

With Javascript functions like:

function validateName() {
    userName = document.getElementById("registerUserName").value.trim();
    re = /^[a-zA-Z0-9_]{1,30}$/;

    if (userName==="") {
        document.getElementById('registerUserName').style.borderColor="red";
        document.getElementById('registerUserNameHint').innerHTML = 'required';
    } else if (!re.test(userName)) {
        document.getElementById('registerUserName').style.borderColor="red";
        document.getElementById('registerUserNameHint').innerHTML = 'only alphanumeric characters and _';
    } else {
        document.getElementById("registerUserName").setAttribute("style","border-color: rgb(221,221,221) rgb(241,241,241) rgb(241,241,241) rgb(221,221,221);");
        document.getElementById('registerUserNameHint').innerHTML = '';
    }
} //validateName()

..So that the input box turns red and shows a hint on the side of the box if it does not validate.

So my question was - What is the best way to prevent the form from submission to my (Mysqli) database when the user hits submit?

(and second question..) Do I run an additional php server-side script after client-side validation has cleared?

Some ways I imagined to accomplish this is by having my Javascript functions set a Session variable that indicates an error condition, and not allow a submit if there was.

I am not certain how to do that, or how I set up my 'submit' to not work unless the error condition was cleared.

Would appreciate any help on that.

Then do I re-validate the same data (in the same manner) with php again, after a successful client-side validation before inserting into my database?

Thanks in advance.

Answer 1

First off, always do server-side validation!

Second, HTML5 form validation is well supported.
Examples: http://html5pattern.com/

You can then use CSS for validation styling.