How to validate HTML form input without using JavaScript?

Javascript is the only way to validate the data on the client side before it is submitted. Since Javascript can be disabled, your server-side code should always validate any submitted data before using it.

As everybody said, never trust client-side verification and HTML 5 can handle your problem, here is a example:

<style>
    body {
        font-family: arial;
        font-size: 15px;
    }

    br {
        clear: left;
    }

    label {
        float: left;
        width: 120px;
    }

    label, span {
        font-weight: bold;
        margin-bottom: 20px;
    }

    span {
        color: red;
        display: inline-block;
    }
</style>

<form action = "/html/tags/html_form_tag_action.cfm" method = "get">
    <!-- Regular expression took care of the "maxlength" attribute -->

    <label>Name: </label>
    <input autofocus = "autofocus" name = "name_applicant" pattern = "^\D{0,100}$" required = "required" type = "text" /> * <br />

    <label>Date of birth: </label>
    <input name = "name_applicant" required = "required" type = "date" /> <br />

    <label>Email Id: </label>
    <input name = "first_name" pattern = "^\D{0,15}\@gmail\.com$" placeholder = "[email protected]" required = "required" type = "email" /> *<br />

    <span>* Do not use numbers</span> <br />

    <input type = "submit" value = "Submit" />
</form>

Preview (Most people don't have Opera or Safari)

Most likely, you cannot do this with just HTML. The exception is using HTML5, which you may or may not be able to use.

HTML5 has a pattern attribute that you can supply a regular expression to constrain what can be typed in. However, not all browser support HTML5 elements and attributes and it may not be 100% for you. More Info: http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-pattern

You could use JavaScript to prevent it from happening and it isn't foolproof either as JavaScript can be turned off in the browser.

Your best bet would be to utilize a server-side scripting language (i.e. PHP, ASP) to verify the data submitted validates to what you expect and if not, prevent it from being submitted and throw an error. This is common practice and is sometimes used in combination with JavaScript constraints.

you can try valijate jquery plugin. of course it is a jquery plugin. but, it uses 'data-XXXX' attributes to do the validations. you can do most of the validation without writing javascript codes.

here is an example for achieving above requirement

<form class="valijate">
<input type="text" data-valijate="at_text_change" data-vjerr="text must not contain any letter or character" data-vjmustn="?l, ?c">
</form>

class valijate and data-vjmustn="?l, ?c" do the magic. it will be checked at every keystroke (data-valijate="at_text_change")

if the user has entered invalid data, user will not able to submit the form.

See this code example:

<form>
    <input type="text"
           name="Number(s) Only"
           pattern="[;0-9]+"
           title ="Must be format: 12345;67891; etc"
           placeholder="12345; 67891; etc."
           onfocusout="this.checkValidity() ? '' : alert('Must be format: 12345;67891; etc')"
           required>
</form>`

This will validate the box when you click off of it.