Develop Reference

how can I put different code or not editable code when ctrl+shift+i I am doing in browser

I have some Html code Like:
Enter UserName <input type="text" name="user"><br>
Enter Password <input type="password" name="pass">
when I running this code it displaing on browser but while I am doing ctrl+shift+i html code is coming like this:
<input name="pass" type="password">
but if I change this type runtime as a "text" then my password is visible.
please tell me some solution how I can change or put different code in runtime that shows not changeable after ctrl+shift+i.

You can do it this way by applying the same security attribute to input box of any type to show value as the password.
input.password-input {
text-security: disc;
-webkit-text-security: disc;
-moz-text-security: disc;
}
Enter UserName <input type="text" name="user"><br> Enter Password <input type="password" class="password-input" name="pass">
If you change input type then text still can't visible.
But caution, someone could simply "inspect element" in Chrome and change the css element from "disc" to "none" and real text would be seen clear as day.

Different title when input invalid and input empty

I have an input:
<input type="text" pattern="[a-zA-Z ]{0,20}" oninvalid="setCustomValidity('Please insert only letters')" required>
If I input a number, the title will appear. But if I don't input anything, it will give the same error title. How can the title when I input not only letters is different when I doesn't input anyhing?

I think that your problem is similar to the one in this link.
The correct answer there says that:
If you set a value with setCustomValidity() then the field is invalid. That is setting a non-zero length string causes the browser to consider the field invalid. In order to allow for the effects of any other validations you have to clear the custom validity:
<input type="password" name="user_password_new" pattern=".{6,}" required oninvalid="setCustomValidity('Minimum length is 6 characters')" oninput="setCustomValidity('')" />
Here is a working example for your case to see:
<form>
<input type="text" pattern="[a-zA-Z ]{0,20}" oninvalid="setCustomValidity('Please insert only letters')" required oninput="setCustomValidity('')">
<button type="submit">Submit</button>
</form>

Different validation scenarios for Parsley

The project which I working on uses Parsley.js as the validation framework. I have not worked on this framework much so, I am unaware of how to show different error messages when the input is empty and when there is an invalid value entered. For example, if the user doesn't enter any value for a particular field, I want to display "This field is required." And when there is an invalid value, I want to display "Please enter a valid value for this field". This is what I have as far of now.
<input type="text" name="firstName" maxlength="40" required pattern="/^[a-zA-Z ',-]+$/" data-parsley-error-message="This field is required">
Any help is appreciated.

<input type="text" name="firstName" maxlength="40"
required
pattern="/^[a-zA-Z ',-]+$/"
data-parsley-required-message="This field is required."
data-parsley-pattern-message="Please enter a valid value for this field."/>
See http://parsleyjs.org/doc/index.html#ui-for-field for more details

how to get rid of HTML 5 validation message with our own custom validation message

I am trying to validate required fields of form in HTML 5 with custom messages that are shown like a tooltip text near the field.
Here is the HTML code that I am trying for this purpose:
<form method="post" action="" id="validation">
Name:<input type="text" id="nome" name="nome" required="required" oninvalid="this.setCustomValidity('Name is required field')" oninput="setCustomValidity('')" /><br />
<br />
<br />
<input type="submit" value="Enviar" />
</form>
Above code is working fine in google chrome except in mozilla in following case:
press submit button, it will give validation message "Name is
required field"
fill something and then before pressing submit type backspace key on
keyboard to erase name completely. When it is completely erased it shows message
"Please fill out this field" on its own.Whereas it should again display a message "Name is
required field" or display just nothing.
Can some one test and provide an alternative solution for doing this in Mozilla.

You can add a "novalidate" attribute to the form element to disable html5 build-in validation, and then handle all the validation by javascript yourself.

If it is just the one field, then you could always just check for that event on the oninput:
oninput="if(this.value==''){this.setCustomValidity('Name is required field')} else {this.setCustomValidity('')};"
http://jsfiddle.net/j1c935ex/2/
For tidier code, you'd be better calling a function, especially if you are doing this on several fields.

Is there a way for a form to identify only one required field

For instance in this example;
<form>
<input type="email" name="email" id="useremail" placeholder="Email Address" required> <br>
<input type="tel" name="phone" id="userphone" placeholder="Phone Number" maxlength="10" required> <br>
<input type="submit" id="sidebarformsubmit" value="Submit">
</form>
Is it possible to somehow/somewhere be able to identify that the user has inputed something in EITHER the email or phone number field. So that on submit it doesn't show "this is required".
Reword: Can at least one of the form inputs be mandatory, both is allowed as is one or the other but not none. In the above example, the user needs to have at least one form of communication whether that be phone number or email. They can have both however, but not none.
If so, how would you go about this?

You can easily capture the change events from the inputs and set the required attribute accordingly.
Like this:
var email = document.getElementById('useremail'),
phone = document.getElementById('userphone');
function onchange(){
email[phone.value?'removeAttribute':'setAttribute']('required','required');
phone[email.value?'removeAttribute':'setAttribute']('required','required');
}
email.addEventListener('change',onchange);
phone.addEventListener('change',onchange);
jsfiddle

Is it possible to somehow/somewhere be able to identify that the user has inputed something in EITHER the email or phone number field. So that on submit it doesn't show "this is required".
1) No. If you use HTML5 required on a field then that field is required. There is no way to specify interdependence.
2) Yes. You can use client-side javascript validation, generally hooked to a form submit event to do as-complex-as-you-like validation. Prevent the submit by returning false from the event handler if you don't pass validation.
3) Yes. You can do validation that can be as complex as necessary on the server when you have received the submitted form, and return directly to the form if something is wrong.
3b) You Must do validation on the server, even if you have great client-side javascript validation, otherwise I will buy things from your site for one penny. You must not trust the client.