I have written a Jquery code for validation. But the problem here is that, First the regular expression message fires and after that requiredField error message fires.
Here is my code:-
var ErrArr = [];
$(document).ready(function () {
$('#btnSave').click(function (e) {
e.preventDefault();
validateTextBoxes();
function FunValidatePan()
if (ErrArr.length > 0)
{
alert(ErrArr.join("\n"));
ErrArr = [];
return false;
}
});
function validateTextBoxes() {
if ($("#txtPanNo").val() === "") {
ErrArr.push('Pan No is required');
}
}
function FunValidatePan() {
var StrPriError = "";
if (Trim(document.getElementById("txtPanNo").value) != "" && Trim(document.getElementById("txtPanNo").value) != "NULL") {
var fil = /^[a-zA-Z0-9]+$/;
if (fil.test(document.getElementById("txtPanNo").value)) {
var abc = Trim(document.getElementById("txtPanNo").value);
if (abc.length != 10) {
StrPriError += ' Enter valid PAN Card\n';
}
}
else {
StrPriError += ' Enter valid PAN Card\n';
}
}
if (StrPriError != "") {
alert(StrPriError);
return false;
}
else {
return true;
}
}
I want that in single message. How to achieve that. Please suggest. Also I want that in Jquery
UPDATE
ASPX
<asp:TextBox ID="txtPanNo" runat="server" Width="100" MaxLength="10"></asp:TextBox>
Please check changes in the above code.
var ErrArr = [];
$(document).ready(function () {
$('#btnSave').click(function (e) {
e.preventDefault();
validateTextBoxes();
FunValidatePan();
if (ErrArr.length > 0)
{
alert(ErrArr.join("\n"));
ErrArr = [];
return false;
}
});
function validateTextBoxes() {
if ($("#txtPanNo").val() === "") {
ErrArr.push('Pan No is required');
}
}
function FunValidatePan() {
if (Trim(document.getElementById("txtPanNo").value) != "" && Trim(document.getElementById("txtPanNo").value) != "NULL") {
var fil = /^[a-zA-Z0-9]+$/;
if (fil.test(document.getElementById("txtPanNo").value)) {
var abc = Trim(document.getElementById("txtPanNo").value);
if (abc.length != 10) {
ErrArr.push('Enter valid PAN Card');
}
}
else {
ErrArr.push('Enter valid PAN Card');
}
}
}
Related
<script language="javascript" type="text/javascript">
function validate() {
summary += isvalidFirstName();
summary += isvalidMobile();
summary += checkPassword();
summary += checkEmail();
if (summary != "") {
alert(summary);
return false;
} else
return true;
}
function isvalidFirstName() {
var uid;
var temp = document.getElementById("<%=txtFirstName.ClientID %>");
uid = temp.value;
if (uid == "") {
return ("Please enter firstname" + "\n");
} else
return "";
}
function isvalidMobile() {
var mob = /^[1-9]{1}[0-9]{9}$/;
var txtMob = document.getElementById(txtMobile);
if (mob.test(txtMob.value) == false) {
alert("Please enter valid mobile number");
txtMob.focus();
return false;
} else
return true;
}
function checkPassword(inputtxt) {
var pass = /^[A-Za-z]\w{7,14}$/;
if (inputtxt.value.match(pass)) {
alert("Password is correct");
return true;
} else {
alert("Wrong...!");
return false;
}
}
function checkEmail(inputtxt) {
var mail = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (inputtxt.value.match(mail)) {
return true;
} else {
alert("Please enetr a valid email id");
return false;
}
}
</script>
I have added the above javascript code inside an .ASPX page and called the function validate on button click but it is not working. Can anyone help me?
I have given validations through jquery which works fine on button click.
But as soon as I fill all the data into the page, my onClick does not fires. I dont know why. Please suggest.
Here is my jquery code:-
var ErrArr = [];
$(document).ready(function () {
$('#btnSave').click(function (e) {
e.preventDefault();
validateTitle();
validateddl();
validateTextBoxes();
if (ErrArr.length > 0) {
alert(ErrArr.join("\n"));
ErrArr = [];
return false;
}
});
function validateTitle() {
if ($("#ddlTitle").val() > "0") {
if ($("#ddlTitle").val() == "1104" && $("#txtTitle").val() === "") {
ErrArr.push("Please enter the text in other title");
}
} else {
ErrArr.push('Please select the title');
}
}
function validateTextBoxes() {
if ($("#txt_emp_fname").val() === "") {
ErrArr.push('First name is required');
}
if ($("#txt_emp_mname").val() === "") {
ErrArr.push('Middle name is required');
}
if ($("#txt_emp_lname").val() === "") {
ErrArr.push('Last name is required');
}
if ($("#txtDateofJoin").val() === "") {
ErrArr.push('Date of joining is required');
}
if ($("#txtReligion").val() === "") {
ErrArr.push('Religion is required');
}
if ($("#txtBloodGroup").val() === "") {
ErrArr.push('Blood group is required');
}
if ($("#txtPersonalEmail").val() === "") {
ErrArr.push('Email Id is required');
}
if ($("#txtDtOfBirth").val() === "") {
ErrArr.push('Date of birth is required');
}
if ($("#txtAt").val() === "") {
ErrArr.push('Place of birth is required');
}
if ($("#txtTaluka").val() === "") {
ErrArr.push('Taluka is required');
}
if ($("#txtPostOffice").val() === "") {
ErrArr.push('Post office is required');
}
if ($("#txtDistrict").val() === "") {
ErrArr.push('District is required');
}
if ($("#txtStatePersonal").val() === "") {
ErrArr.push('State is required');
}
if ($("#txtDtMarriage").val() === "") {
ErrArr.push('Date of Marriage is required');
}
if ($("#TxtPassportNo").val() === "") {
ErrArr.push('Passport no is required');
}
if ($("#txtIdMark").val() === "") {
ErrArr.push('Identification mark is required');
}
}
function validateddl() {
if ($("#ddlGender").val === "" || $("#ddlGender").val() == "0") {
ErrArr.push('Please select the gender');
}
if ($("#ddlMaritalStatus").val === "" || $("#ddlMaritalStatus").val() == "0") {
ErrArr.push('Please select the Marital Status');
}
if ($("#ddlNationality").val === "" || $("#ddlNationality").val() == "0") {
ErrArr.push('Please select the Nationality');
}
}
});
Also see my aspx of button:-
<asp:Button ID="btnSave" CssClass="button" Text="Save" runat="server"
CausesValidation="true" onclick="btnSave_Click"
/>
I suggest you do NOT use the click of the button but the submit of the form to validate:
$(document).ready(function () {
$('#formID').on("submit",function (e) {
// e.preventDefault(); // does not belong here
validateTitle();
validateddl();
validateTextBoxes();
if (ErrArr.length > 0) {
e.preventDefault();// but here
alert(ErrArr.join("\n"));
ErrArr = [];
}
});
.
.
.
I assume that also means you should make your button a submit button and make sure the asp does not add a click event since it is already assigned by the jQuery
$('#btnSave').on("click", function(e) {
//e.preventDefault();
validateTitle();
validateddl();
validateTextBoxes();
if(ErrArr.length > 0) {
e.preventDefault(); //use e.preventDefault here
alert(ErrArr.join("\n"));
ErrArr = [];
//return false;
}
});
move event prevent on the button click handler only when client validation fails.
$('#btnSave').click(function (e) {
validateTitle();
validateddl();
validateTextBoxes();
if (ErrArr.length > 0) {
alert(ErrArr.join("\n"));
ErrArr = [];
e.preventDefault();
return false;
}
});
Try this
$('#btnSave').click(function(e) {
//e.preventDefault();
validateTitle();
validateddl();
validateTextBoxes();
if(ErrArr.length > 0) {
e.preventDefault(); //use e.preventDefault here
alert(ErrArr.join("\n"));
ErrArr = [];
//return false;
}
});
Right now i have it to tab on enter but i would like to get it to ONLY enter the element when there is 11 characters. How would i do it?
function getNextElement(field) {
var form = field.form;
for ( var e = 0; e < form.elements.length; e++) {
if (field == form.elements[e]) {
break;
}
}
return form.elements[++e % form.elements.length];
}
function tabOnEnter(field, evt) {
if (evt.keyCode === 13) {
if (evt.preventDefault) {
evt.preventDefault();
} else if (evt.stopPropagation) {
evt.stopPropagation();
} else {
evt.returnValue = false;
}
getNextElement(field).focus();
return false;
} else {
return true;
}
}
Maybe just something simple like that:
if(field.value.length === 11)
getNextElement(field).focus();
So I'm very new to JavaScript and I'm trying a very simple enter text and check it. It doesn't seem to work the way I want it to. I want all of the inputs to go through the checkInputs. After All of them are 100% I want it to check if hoursWorked and horlyRate are numbers above 0. It seems to just move on to the checkNumberValidation without checking if all inputs are filled.
I got:
function checkNumbersValidation(field){
if( isNaN(field) ) {
field.value = "Must be a number";
field.focus("");
}
}
function checkInputs(field) {
var test = false;
do{
if ( field.value === null || field.value.trim() === "" ) {
field.value = "Input needed";
//set focus
field.focus("");
}else if (field.value === "0") {
field.value = "Can't be zero";
field.focus("");
}else {
tests = true;
}
}while (test = false)
}
function handelCalcButtonClicked (e) {
var passFirstTests = false;
var textFields = ["fullName", "hoursWorked", "hourlyRate"];
for( var i = 0; i < textFields.length; i ++ ) {
var field = document.getElementById(textFields[i]);
checkInputs(field);
}
if( **something** ) {
var numberFields = ["hoursWorked", "hourlyRate"]
for ( var i = 0; i < numberFields.length; i++ ) {
field = document.getElementById(numberFields[i]);
checkNumbersValidation(field);
}
}
}
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("calcButton").addEventListener("click", handelCalcButtonClicked, false);
});
clearly I don't know what I'm doing. In the function handelCalcButtonClicked I'm not sure how to move on the the next part (the part Saying something). Any help would be nice!
Inside checkNumbersValidation you need to do the isNan call on field.value, not field:
if( isNaN(field.value) )
If you want to know if all of your fields have gone through checkInputs and have passed, you will need checkInputs to return whether or not each field has passed:
function checkInputs(field) {
if ( field.value === null || field.value.trim() === "" ) {
field.value = "Input needed";
//set focus
field.focus("");
return false;
} else if (field.value === "0") {
field.value = "Can't be zero";
field.focus("");
return false;
}
return true;
}
This will allow you to know if all fields have passed the check:
var passedAllChecks = true;
for( var i = 0; i < textFields.length; i ++ ) {
var field = document.getElementById(textFields[i]);
passedAllChecks = checkInputs(field) && passedAllChecks;
}
if(passedAllChecks) {
/* do number validation stuff */
}
What about this:
function checkNumbersValidation(field) {
if (isNaN(field)) {
field.value = "Must be a number";
field.focus("");
}
}
function checkInputs(field) {
if (!field.value || !field.value.trim()) {
field.value = "Input needed";
field.focus("");
return;
if (field.value === "0") {
field.value = "Can't be zero";
field.focus("");
}
}
function handelCalcButtonClicked (e) {
var textFields = ["fullName", "hoursWorked", "hourlyRate"],
numberFields = [ "hoursWorked", "hourlyRate"],
i,
field;
for (i = 0; i < textFields.length; i++) {
field = document.getElementById(textFields[i]);
checkInputs(field);
}
for (i = 0; i < numberFields.length; i++) {
field = document.getElementById(numberFields[i]);
checkNumbersValidation(field);
}
}
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("calcButton").addEventListener("click", handelCalcButtonClicked, false);
});
or:
function checkInput(field, isnumber) {
if (!field) return;
if (isnumber === true && isNaN(field)) {
field.value = "Must be a number";
field.focus("");
return;
}
if (field.value === "0") {
field.value = "Can't be zero";
field.focus("");
return;
}
if (!field.value || !field.value.trim()) {
field.value = "Input needed";
field.focus("");
}
}
function handelCalcButtonClicked (e) {
checkInput(document.getElementById('fullName');
checkInput(document.getElementById('hoursWorked', true);
checkInput(document.getElementById('hourlyRate', true);
}
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("calcButton").addEventListener("click", handelCalcButtonClicked, false);
});
Hy Guys,
Please Look at the code and Try to Help Out. The function ive written is not working but its RUNNING properly. Its about To set focus on next content on page im using it on an ASPX page. Heres my code Below :
function SetFocusOnSave(CTag,NTag)
{
alert('Running'+CTag+NTag);
var CurrentTag=document.getElementById(CTag);
var NextTag = document.getElementById(NTag);
if ( (event.keyCode==13)||(event.keyCode==9) )
{
if(CurrentTag.value=="")
{
alert("Please Enter Detail First");
CurrentTag.focus();
}
if(CurrentTag.value!="")
{
event.returnValue=true;
document.getElementById(NextTag).focus();
}
}
}
snametxt.Attributes.Add("onkeypress",
SetFocusOnSave('<%=snametxt.ClientID%>','<%=sdesctxt.ClientID%>');");
have you tried to replace
document.getElementById(NextTag).focus();
with
NextTag.focus();
?
You have to add return false; after you found the false in validation otherwise the flow will continue till end.
Try this function:
function SetFocusOnSave(CTag, NTag) {
alert('Running' + CTag + NTag);
var CurrentTag = document.getElementById(CTag);
var NextTag = document.getElementById(NTag);
if ((event.keyCode == 13) || (event.keyCode == 9))
{
if (CurrentTag.value == "")
{
alert("Please Enter Detail First");
CurrentTag.focus();
return false;
}
if (CurrentTag.value != "") {
event.returnValue = true;
NextTag.focus();
return false;
}
}
};
Hy Guys Ive Tried A NEW CODE AND Fortunately Its Working Fine Here its my Code
function Navigation(CTag, NTag, Number) {
var CurrentTag = document.getElementById(CTag);
var NextTag = document.getElementById(NTag);
var IsNumber = Number; //Checking if value is number
if (NextTag.disabled == true) {
NextTag.disabled = false;
NextTag.className = "txt";
}
if (event.keyCode == 9) {
CurrentTag.focus();
event.returnvalue = false;
}
if (event.keyCode != 9) {
if (event.keyCode == 13) {
if (IsNumber == "Y") {
if (NextTag.disabled == true) {
NextTag.disabled = false;
}
if (CurrentTag.value != "") {
NextTag.focus();
event.returnvalue = true;
}
if (CurrentTag.value == "") {
alert('Please Enter Value To Proceed Further.');
CurrentTag.focus();
event.returnvalue = false;
}
if (isNaN(CurrentTag.value)) {
alert("Please Enter A Valid Number");
CurrentTag.value = "";
CurrentTag.focus();
}
}
if (IsNumber == "N") {
if (CurrentTag.value == "") {
alert('Please Enter Value To Proceed Further.');
CurrentTag.focus();
event.returnvalue = false;
}
if (CurrentTag.value != "") {
NextTag.focus();
event.returnvalue = true;
}
}
}
}
};
Thanks ya'll !! :)