Как проверить текстовые поля в div javascript или jQuery

Question

как интегрировать тип проверки в моем JavaScript с идеей If значение var firstName is = to null не добавлять переменные var sHtml и summaryHtml и изменять класс, чтобы изменить границы текстового поля и очистить поле

правила:

firstName = must contain at least 1 letter and no more than 15 letters 
lastName = must contain at least 1 letter and no more than 15 letters 
jobTitle = must contain something other than an option value of "" (in the html option tag) 
eSculation = must contain something other than an option value of "" (in the html option tag) 
mobilePhone = must contain 9 numbers. This field has a mask attached: (999) 999-99999 
officePhone = = must contain 9 numbers. This field has a mask attached: (999) 999-99999 
eMail = Must contain the following symbol: an @ sign and a . to represent xxx@xx.xxx 

JavaScript Я использую, чтобы представить в таблице ниже:

newRow = 1; 
currentRow = -1; 

function CompanyContacts() { 
var rowID = parseInt(document.getElementById("ContactsRowCount").value, 10); 
rowID++; 
if (currentRow > 0) { 
    saveEdits(); 
} else { 
    var firstName = $("#ccFirst").val(); 
    var lastName = $("#ccLast").val(); 
    var jobTitle = $("#ccjTitle").val(); 
    var eSculation = $("#ccEsculation").val(); 
    var mobilePhone = $("#ccMobile").val(); 
    var officePhone = $("#ccOffice").val(); 
    var eMail = $("#ccEmail").val(); 
    var sHtml = "<tr id='row" + rowID + "'>" + 
     "<td class='tblStyle68wlb' id=\"ccFirst" + rowID + "\">" + firstName + "</td>" + 
      "<input type=\"hidden\" value=\"" + firstName + "\" name=\"cFirst" + rowID + "\" />" + 
     "<td class='tblStyle68wl' id=\"ccLast" + rowID + "\">" + lastName + "</td>" + 
      "<input type=\"hidden\" value=\"" + lastName + "\" name=\"cLast" + rowID + "\" />" + 
     "<td class='tblStyle68wlb' id=\"ccjTitle" + rowID + "\">" + jobTitle + "</td>" + 
      "<input type=\"hidden\" value=\"" + jobTitle + "\" name=\"cJobTitle" + rowID + "\" />" + 
     "<td class='tblStyle68wl' id=\"ccEsculation" + rowID + "\">" + eSculation + "</td>" + 
      "<input type=\"hidden\" value=\"" + eSculation + "\" name=\"cContactPoint" + rowID + "\" />" + 
     "<td class='tblStyle68wlb' id=\"ccMobile" + rowID + "\">" + mobilePhone + "</td>" + 
      "<input type=\"hidden\" value=\"" + mobilePhone + "\" name=\"cMobilePhone" + rowID + "\" />" + 
     "<td class='tblStyle68wl' id=\"ccOffice" + rowID + "\">" + officePhone + "</td>" + 
      "<input type=\"hidden\" value=\"" + officePhone + "\" name=\"cOfficePhone" + rowID + "\" />" + 
     "<td class='tblStyle68wlb' id=\"ccEmail" + rowID + "\">" + eMail + "</td>" + 
      "<input type='hidden' value='" + eMail + "' name='cEmail" + rowID + "' />" + 
     "<td class='tblStyle68wl' ><button type='button' class='XsmallButtons' onclick='editRow(" + rowID + ")'>Edit</button>" + 
     "</td><td class='tblStyle68wlb' ><button type='button' class='XsmallButtons' onclick='deleteRow(" + rowID + ")'>Delete</button>" + 
     "</td></tr>"; 
    var summaryHtml = "<tr id='SummaryRow" + rowID + "'>" + 
     "<td id='ccFirst" + rowID + "'>" + firstName + "</td>" + 
     "<td id='ccLast" + rowID + "'>" + lastName + "</td>" + 
     "<td id='ccjTitle" + rowID + "'>" + jobTitle + "</td>" + 
     "<td id='ccEsculation" + rowID + "'>" + eSculation + "</td>" + 
     "<td id='ccMobile" + rowID + "'>" + mobilePhone + "</td>" + 
     "<td id='ccOffice" + rowID + "'>" + officePhone + "</td>" + 
     "<td id='ccEmail" + rowID + "'>" + eMail + "</td>" + 
     "</tr>"; 
    $("#customerContactSubmitedTable").append(sHtml); 
    $("#SummaryCCTable").append(summaryHtml); 
    newRow++; 
    document.getElementById("ContactsRowCount").value = rowID; 
    $("#ccFirst,#ccLast,#ccjTitle,#ccEsculation,#ccMobile,#ccOffice,#ccEmail").val(""); 
} 
} 
function editRow(rowID) { 
$('#ccFirst').val($('#ccFirst' + rowID).html()); 
$('#ccLast').val($('#ccLast' + rowID).html()); 
$('#ccjTitle').val($('#ccjTitle' + rowID).html()); 
$('#ccEsculation').val($('#ccEsculation' + rowID).html()); 
$('#ccMobile').val($('#ccMobile' + rowID).html()); 
$('#ccOffice').val($('#ccOffice' + rowID).html()); 
$('#ccEmail').val($('#ccEmail' + rowID).html()); 
currentRow = rowID; 
} 
function saveEdits() { 
$('#ccFirst' + currentRow).html($('#ccFirst').val()); 
$('#ccLast' + currentRow).html($('#ccLast').val()); 
$('#ccjTitle' + currentRow).html($('#ccjTitle').val()); 
$('#ccEsculation' + currentRow).html($('#ccEsculation').val()); 
$('#ccMobile' + currentRow).html($('#ccMobile').val()); 
$('#ccOffice' + currentRow).html($('#ccOffice').val()); 
$('#ccEmail' + currentRow).html($('#ccEmail').val()); 
$("#ccFirst,#ccLast,#ccjTitle,#ccEsculation,#ccMobile,#ccOffice,#ccEmail").val(""); 
currentRow = -1; 
} 
function deleteRow(rowID) { 
$('#row' + rowID).remove(); 
$('#SummaryRow' + rowID).remove(); 
var rowCount = parseInt(document.getElementById("ContactsRowCount").value, 10); 
rowCount--; 
document.getElementById("ContactsRowCount").value = rowCount; 
} 
function ccClear() { 
$("#ccFirst,#ccLast,#ccjTitle,#ccEsculation,#ccMobile,#ccOffice,#ccEmail").val(""); 
} 

Answer 1

Добавить validation="regex here" для ввода тегов в первую очередь, чтобы дать им легкое визуальное уведомление. Beyond, если вы хотите проверить с JQuery, вы можете проверить каждое значение и не послать вне АЯКС запрос, если какой-либо недействительны, используя что-то вроде этого, чтобы проверить, что (строка в данном случае) значения являются правильными $(your_element_here).val().match(your_regex_here)

Возможно, if ($(#id).val().match(some_verification_regex) == null){ return false }

только буквы: /^[A-z]+$/

номер телефона, как вы упомянули выше: /^\(\d{3}\) \d{3}-\d{4}$/

Answer 2

что я хотел бы предложить это проверка jQuery плагин, и вы можете найти многие из них и выбрать, какие костюмы ваши потребности фр ом ниже:

jquery.bassistance

ddarrenjQuery-Live-Form-Validation-For-Twitter-Bootstrap

jzae fferer-jquery-validation

Или вы ищете на jQuery.com сайте, чтобы получить множество совместимых плагинов JQuery проверки.

Но если вы не хотите использовать какой-либо плагин, тогда вы должны написать свой собственный код проверки.

электронной почты и проверки других областей функции:

function emailValidate(e){ 
     var p = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i); 
     return p.test(e); 
    } 
function validate(val, min, max){ 
    return (val.length < min || val.length > max?false:true); 
} 
vfirstName = validate(firstName,1,15);//if between 1 and 15 will return true 
vlastName = validate(lastName ,1,15);//if between 1 and 15 will return true 
vjobTitle = validate(jobTitle ,1,50);//if between 1 and 15 will return true 
veSculation = validate(eSculation ,1,50);//if between 1 and 15 will return true 
vmobilePhone = validate(eSculation ,1,50);//if between 1 and 15 will return true 
vofficePhone = validate(officePhone,12,12);//because `(999) 999-99999` length is 12 
veMail = emailValidate(eMail);//also will return false if wrong email format 
if(vfirstName && vlastName && vjobTitle && veSculation && vmobilePhone && vofficePhone && veMail) 
    var errors = false; 
else 
    var errors = true; 

Затем перед добавлением сформированной строки можно добавить некоторые условия, как:

if(!errors){ 
$("#customerContactSubmitedTable").append(sHtml); 
//....rest of your code 
}else 
alert('please correct the fields');//or any other event