We Keep Coding

HTML required character set for form fields

I have created an online forum with a username and password field. The problem is that I would like to add restrictions on the input to weed out invalid username formats. (Valid username will start with the first 3 characters as XYZ). Is there anyway I can set up a rule that if the first 3 letters of username STARTS with let's say ABC, the Submit button will grey out and display a message that that username is not valid before it checks with the server? But if the user types the required beginning format letters correctly then the Submit button will be enabled?
I tried making the code using the same principals as the # sign being required in an email address but have had strange results.

The simplest way is to use the HTML5 pattern attribute:
<style>
:invalid { border-color: red }
</style>
<form>
<label for=uname>Username:</label>
<input id=uname name=uname type=text pattern="XYZ.*">
<p><input type=submit value=Submit>
</form>
The example uses CSS to indicate an invalid field with red border, for illustration.
The code accepts literally any string that starts with XYZ (case-sensitively), including the string XYZ. Modify as needed.
Since the pattern attribute is not universally supported, you probably want to add JavaScript code that performs a similar check. In it, using a regular expression, as in a pattern attribute, is the simplest approach.

Javascript or Jquery - restricting input field to only 8 decimals

Is it possible to restrict a form field in HTML with Jquery/Javascript to only 3 decimals . What I mean is that: 33.334 should be allowed as input 3.344 & 444444.556 etc. as well but it should not allow 5.6664 etc.
How can I do that?

You don't need jQuery to do that. Just use pattern attribute of <input> like this
<input type="text" pattern="^\d+\.\d{0,3}$">
The above would work on most browsers but if you want to support some old browsers, you would bind that <input> on a key-based event and check for the value using the above regex and restricting the user input.
$('input').on('blur', function () {
if (!/^\d+\.\d{0,3}$/.test($(this).val())) {
alert("Must be a number upto 3 decimals!");
}
});
DEMO
Press Enter to see pattern in action. Click elsewhere to see jQuery in action

HTML5 Browser Validation - 1 form, 2 buttons, need to change validation

I have a form with two buttons - one is a "submit" button at the end of the form, and in the middle of the form I have an "Add" button that uses Javascript to add hidden input elements within the form whenever it's clicked.
Here are the two input fields/add button:
<input name="name" required>
<input name="email" required type="email">
<button type="submit">Add</button>
And then another set of input fields:
<input name="title" required>
<button type="submit">Submit</button>
And these are all within one form.
I want HTML5 browser validation to fire on the "name" and "email" fields when I click "Add" (but not the "title" field) and the browser validation to fire on the "title" field (but not the "name" and "input" fields) when I click "Submit." Is there any way to accomplish this?

You can add or remove attribute "required" to the fields to which you required by
$('#field_id').attr('required','true');
$('#field_id').removeAttr('required');

Is there any particular reason that you want to use HTML5 to validate your form in the first place? I feel like what you need would be easily accomplished using Javascript, and you noted that your add button would be using javascript anyway. Also, why would your form validation to be partitioned in such an odd way?
I don't even like the HTML5 validation in the first place. For example, if you type in "asdf#1" into an HTML5 email input, it will accept it. Now, you can make the argument that that's technically a valid email address, but I think in practice most people would agree that they wouldn't accept that as a valid email address. You could use an IP address in place of the domain but I highly doubt that you could use that as an email to log into any modern web page.
But I digress. To answer your question, you could write a quick function with JQuery that would override the form validation based on which button was clicked. You would do this by catching the "invalid" error thrown by the HTML5 validation for that particular input and returning false to get around it. Therefore, when you clicked submit you could override the name and email form validation, and vice versa for when you click the add button. Again, I have no idea why you would want to do this but it is a solution.

The only way I see is to set the required attributes (or: properties) dynamically on-click.
Or you can add and remove event listeners for invalid, which seem to suppress the native "missing"/"wrong format" notice - even if they do nothing (like preventDefaultAction or so).
I also tried buttons with the formnovalidate attribute and manually checkValidity() on the elected elements, but even though that fires "invalid"-events no native dialogue is shown and the submit is not cancelled. (tested everything with opera)

(Javascript) Can i set "autocomplete=off" for Single Inputbox?

Inside a <form> I want to use multiple Password type fields but.. I want to make some of them not to be remembering the value of it.
Normally i can use autocomplete=off inside <form> tag.
But this affects over every single fields inside.
Edited: Got Simple Solution Now
<input autocomplete="off" ....... />

Yes, you can (set autocomplete="off" on individual inputs).

You can set autocomplete on a single field by using:
#Html.TextBoxFor(x => x.Property, new {autocomplete = "off"})
If you're using DisplayForModel than you will have to create a custom Edit Template.

You can set it on individual fields, but it's a non-standard HTMl extension and will cause your pages to fail validation: Is there a W3C valid way to disable autocomplete in a HTML form?

HTML & Javascript: Using a customized Text Input for Password input

I want to re-invent the password input in HTML.
Okay, here is the work I'd done:
http://www.symplik.com/password.html
(It just a plain html code, nothing really fancy :>)
The "password" is indeed a text input, and I used the onkeyup event to rewrite the input to masking characters.
There're two problems:
(1) backspace or delete cannot be detected
(2) if I type very fast, some characters cannot be captured promptly.
For problem (1). it is partially solved by checking the length of text in the password field and the stored password. Not a very elegant solution anyway.
For problem (2), I'd tried to insert some time delay function in between but still fail. I'd make the field readOnly after every keyUp but it still behaves the same.

Why not use
<input type='password'>
It masks the input for you. No need for javascript.