We Keep Coding

Setting custom HTML5 validity message property ignores pattern regex

I'm using the pattern attribute in an HTML5 input. It works fine, until I add a custom message using setCustomValidity. All this is supposed to do is
Sets the validationMessage property of an input element.
But instead my pattern is ignored. If I comment out the setCustomValidity, the pattern works.
HTML
<form>Country code:
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
JS
$('input').get(0).setCustomValidity("It's wrong");
$('input').on('input', function () {
console.log($(this).prop('validity'));
var valid = $(this).get(0).checkValidity();
console.log(valid); });
http://jsfiddle.net/hrtsz50s/

use reportValidity(); insted of checkValidity(); and when you call the function clear the validity with an empty string first!
$('input').get(0).setCustomValidity("It's wrong");
$('input').on('input', function () {
this.setCustomValidity('');//Add this!!
console.log($(this).prop('validity'));
var valid = $(this).get(0).reportValidity();//here
console.log(valid); });
edit
Got it working in this fiddle: http://jsfiddle.net/hrtsz50s/1/

form onsubmit doesn't work end changing value of input

I'm making a form to change the password.
I ask for the current password and then there are two fields to put the new password.
I have two problems:
First: I need to check if the two fields of the new password are equal.I used onsubmit to check that.If they are the same, submit.If not it should show a message saying something.The problem is that it doesn't display.This is the code:
function checkform(){
var pass=myForm.pass.value;
var new=myForm.new.value;
var new=myForm.new2.value;
if(new!=new2){
document.getElementById("message").style.display='block';
document.getElementById("pass").value=" ";
document.getElementById("new").value=" ";
document.getElementById("new2").value=" ";
return false;
}else{
return true;
}
}
When I insert diferent new passwords it still submits, but if I delete that document.getElementById it doesn't submit.
Second problem: I have a php page (not using frameworks, just php) that is a class.When I want to acess a function of that class all I need to do is
include("class.php");
$my = new the_class(); $response= $my->check();`
The check() function retrives the password, so then I can check if the value from the field pass is the same as the $response.But how can I put this on the function checkform()? It doesn't work this way.

Don't take the variable name as new its a keyword it is reserved for creating an instance, so better take some other name to the variable and you may get what you're looking for.

**You Try below code**
function checkform(){
var pass=myForm.pass.value;
var new=document.getElementById("new").value();
var new=document.getElementById("new2").value();
if(new!=new2){
document.getElementById("message").style.display='block';
document.getElementById("pass").value=" ";
document.getElementById("new").value=" ";
document.getElementById("new2").value=" ";
return false;
}else{
return true;
}
}

Referencing a form assigned to a variable in jQUERY

I have a form with id='form1' as well as another one with 'form2'. On submit, i want to pass both forms as objects to a single validate function which can validate them. I am confused on how to do this.
If i do something like
var form = $('#form1');
Validate(form);
how do i access the text-fields of the variable form?
i don't want to write duplicate validate functions as both forms are ALMOSt similar.

You can do following also...
A Complete example is here...
function validate(formid){
var form = $("#"+formid);
var name = form.find("#name");
var number = form.find("#number");
alert(name.val());
alert(number.val());
}
validate("form1");
validate("form2");

Try .find. Your form will serve as the context and you could reuse it for different forms.
See below:
var form = $('#form1');
function Validate(form){
var field1 = form.find(".field1");
}

With the name of the fields, you can do this:
function Validate(form) {
form = form[0]; // raw element
if (check_syntax(form.name.value)) { doSomething(); }
if (check_syntax(form.email.value)) { doSomething(); }
if (check_syntax(form.anotherfield.value)) { doSomething(); }
}
If every field in the form has a name, you can access it via form.fieldName or form['fieldName'].
Regards.

Assuming both forms are similar:
ValidateForm($("#form1, #form2"));
function ValidateForm(forms){
forms.each(function(){
$(this).find('input[type=text]').each(function(){
//Do something to validate text field
})
$(this).find('input[type=checkbox]').each(function(){
//Do something to validate checkbox
})
})
}

Get name of form element

i have this simple JS for validating form, can someone tell me how to get name of field (you know, name=""), it should be where NameOfSomefield is now :S I tried with someField.tagName but no luck...
function validateForm(){
var someField = document.forms["nameofofrm"]["someField"].value;
if (someField==null || someField=="") {
alert("You cannot leave blank this field: ".NameOfSomefield);
return false;
}
}

var name = element.getAttribute("name");

If you want a jQuery approach, you may use:
let elementName = $('#element_id').attr('name')
You can find more information about jQuery selectors here

Reset textbox value in javascript

If I have a input textbox like this:
<input type="text" id="searchField" name="searchField" />
How can I set the value of the textfield using javascript or jQuery?
You would think this was simple but I've tried the following:
Using defaultvalue
var a = document.getElementById("searchField");
a.value = a.defaultValue;
Using jQuery
jQuery("#searchField").focus( function()
{
$(this).val("");
} );
Using js
document.getElementById("searchField").value = "";
None of them are doing it... :/

In Javascript :
document.getElementById('searchField').value = '';
In jQuery :
$('#searchField').val('');
That should do it

With jQuery, I've found that sometimes using val to clear the value of a textbox has no effect, in those situations I've found that using attr does the job
$('#searchField').attr("value", "");

Use it like this:
$("#searchField").focus(function() {
$(this).val("");
});
It has to work. Otherwise it probably never gets focused.

To set value
$('#searchField').val('your_value');
to retrieve value
$('#searchField').val();

I know this is an old post, but this may help clarify:
$('#searchField')
.val('')// [property value] e.g. what is visible / will be submitted
.attr('value', '');// [attribute value] e.g. <input value="preset" ...
Changing [attribute value] has no effect if there is a [property value].
(user || js altered input)

Try using this:
$('#searchField').val('');

First, select the element. You can usually use the ID like this:
$("#searchField"); // select element by using "#someid"
Then, to set the value, use .val("something") as in:
$("#searchField").val("something"); // set the value
Note that you should only run this code when the element is available. The usual way to do this is:
$(document).ready(function() { // execute when everything is loaded
$("#searchField").val("something"); // set the value
});

This worked for me:
$("#searchField").focus(function()
{
this.value = '';
});

this is might be a possible solution
void 0 != document.getElementById("ad") && (document.getElementById("ad").onclick =function(){
var a = $("#client_id").val();
var b = $("#contact").val();
var c = $("#message").val();
var Qdata = { client_id: a, contact:b, message:c }
var respo='';
$("#message").html('');
return $.ajax({
url: applicationPath ,
type: "POST",
data: Qdata,
success: function(e) {
$("#mcg").html("msg send successfully");
}
})
});