I have created a form and with JS, if the value is " " or null, the bottom-border-color is changed to red. With input::placeholder {red} the text changes to red. Im trying to apply this if the value is " " or null. Is there a way to add this logic to my current JS code? Any tips are greatly appreciated! Thank you in advance.
form.addEventListener("submit", (e) => {
if (nameValue.value === "" || nameValue.value == null) {
nameError.innerText = "Please add your name!";
inputs[1].classList.add("invalid");
} else {
nameError.innerText = "";
}
if (companyValue.value === "" || companyValue.value == null) {
companyError.innerText = "Please add your companys name!";
inputs[2].classList.add("invalid");
} else {
companyError.innerText = "";
}
if (titleValue.value === "" || titleValue.value == null) {
titleError.innerText = "Please add your title!";
inputs[3].classList.add("invalid");
} else {
titleError.innerText = "";
}
if (messageValue.value === "" || messageValue.value == null) {
messageError.innerText = "Please leave a message!";
inputs[4].classList.add("invalid");
} else {
messageError.innerText = "";
}
if (emailValue.value === "" || emailValue == null) {
emailError.innerText = "Please add your email!";
inputs[5].classList.add("invalid");
} else {
emailError.innerText = "";
}
e.preventDefault();
});
Just create a parent class to affect and adjust your rules accordingly
function showDemo() {
document.querySelector('input[name="test"]').classList.toggle('invalid');
}
input{
padding:5px;
width:70%;
}
::placeholder{
color:#ccc;
}
.invalid::placeholder{
color:#f00;
}
<div class='form-control'>
<input name='test' placeholder="Don't type anything in here, just click the button"/>
</div>
<button onclick='showDemo()'>Test this (toggle) </button>
Related
I have 2 textbox.
<input type="text" id="pcbaSerialNo"/>
and
<input type="text" id="pcbaSerialNoMask"/>
and the js
function handlePCBASerialNo(e)
{
var pcbaSerialNo = $(this).val();
var pcbaSerialNoMask = $('#pcbaSerialNoMask').val();
if(e.which ==13)
{
if(pcbaSerialNo == "")
{}
else
{
if(jQuery.inArray(pcbaSerialNo, pcbaSerialNoMask) != -1)
{
alert("Duplicate scan is not allowed!");
}
else
{
if(pcbaSerialNoMask == "")
{
$('#pcbaSerialNoMask').val(pcbaSerialNo);
$('#totalScan').val("1");
}
else
{
var totalScan = $('#totalScan').val();
$('#pcbaSerialNoMask').val(pcbaSerialNo + "," + pcbaSerialNoMask);
$('#totalScan').val(parseInt(totalScan) + 1);
}
}
$('#pcbaSerialNo').bind('keypress', handlePCBASerialNo);
$('#pcbaSerialNo').val("");
}
}
}
$('#pcbaSerialNo').keypress(handlePCBASerialNo);
The js function will run on enter key in textbox.
When scan on textbox #pcbaSerialNo, it will send the value to #pcbaSerialNoMask. (Example more than 1 value will be: test1, test2)
Now I need to validate #pcbaSerialNo to detect if there is same value.
My question, how to validate that textbox to prevent same value(duplicate)?
function handlePCBASerialNo(e)
{
var pcbaSerialNo = $(this).val();
var pcbaSerialNoMask = $('#pcbaSerialNoMask').val();
if(e.which ==13)
{
if(pcbaSerialNo == "")
{}
else
{
if(jQuery.inArray(pcbaSerialNo, pcbaSerialNoMask) != -1)
{
alert("Duplicate scan is not allowed!");
}
else
{
if(pcbaSerialNoMask == "")
{
$('#pcbaSerialNoMask').val(pcbaSerialNo);
$('#totalScan').val("1");
}
else
{
var totalScan = $('#totalScan').val();
$('#pcbaSerialNoMask').val(pcbaSerialNo + "," + pcbaSerialNoMask);
$('#totalScan').val(parseInt(totalScan) + 1);
}
}
$('#pcbaSerialNo').bind('keypress', handlePCBASerialNo);
$('#pcbaSerialNo').val("");
}
}
}
$('#pcbaSerialNo').keypress(handlePCBASerialNo);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" id="pcbaSerialNo"/>
<input type="text" id="pcbaSerialNoMask"/>
Just add below line before checking for existing value. You have to convert the string value to array while using inArray function.
pcbaSerialNoMask = pcbaSerialNoMask.split(",");
function handlePCBASerialNo(e)
{
var pcbaSerialNo = $(this).val();
var pcbaSerialNoMask = $('#pcbaSerialNoMask').val();
if(e.which ==13)
{
if(pcbaSerialNo == "")
{}
else
{
pcbaSerialNoMask = pcbaSerialNoMask.split(",");
if(jQuery.inArray(pcbaSerialNo, pcbaSerialNoMask) != -1)
{
alert("Duplicate scan is not allowed!");
}
else
{
if(pcbaSerialNoMask == "")
{
$('#pcbaSerialNoMask').val(pcbaSerialNo);
$('#totalScan').val("1");
}
else
{
var totalScan = $('#totalScan').val();
$('#pcbaSerialNoMask').val(pcbaSerialNo + "," + pcbaSerialNoMask);
$('#totalScan').val(parseInt(totalScan) + 1);
}
}
$('#pcbaSerialNo').bind('keypress', handlePCBASerialNo);
$('#pcbaSerialNo').val("");
}
}
}
$('#pcbaSerialNo').keypress(handlePCBASerialNo);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" id="pcbaSerialNo"/>
<input type="text" id="pcbaSerialNoMask"/>
I am having difficulties with deleting the custom error messages in my form validation. Each time I submit the form, the messages replicates and I dont know how I can delete them if a field is valid. I am pleased to hear your answers!
form.onsubmit = function valCheck(ev) {
ev.preventDefault();
var fields = ev.target
console.log(fields);
var nameVal = /^[a-zA-ZäÄüÜöÖáàiìíéèóòúù `´,.'-]+$/;
var emailVal = /[^\s#]+#[^\s#]+\.[^\s#]+/;
for (var i = 0; i < formLen; i++) {
var errorText = document.createElement('P');
div[i].appendChild(errorText);
console.log(errorText);
if (fields[i].value === "") {
errorText.innerHTML = "This field should not be empty"
}
else if (fields[i].type == "text") {
if (!fields[i].value.match(nameVal)) {
errorText.innerHTML = "no numbers allowed"
}
}
else if (fields[i].type == "email") {
if (!fields[i].value.match(emailVal)) {
errorText.innerHTML = "insert a valid adress"
}
}
else if (fields[i].type == "checkbox") {
if (!fields[i].checked) {
errorText.innerHTML = "checkbox need to be checked"
}
}
else if (fields[i].type == "radio") {
if (fields[i].checked) {
errorText.innerHTML = "you need to select something"
}
}
}
}
I believe you may just to assign empty value to errorText.innerHTML before validation:
form.onsubmit = function valCheck(ev) {
ev.preventDefault();
errorText.innerHTML = '';
// setting non-empty errorText.innerHTML if form is not valid
// ...
}
I have a number of fields on a form that I perform Validation on, which I then want to Focus on if the validation fails. The Validation works fine, i.e. rtnStr, but the focus() just won't land on any of the textbox fields, i.e. vCtrl. It remains on the Submit button.
<script language="javascript">
function ValidateForm() {
var rtnStr = "";
var vCtrl = "";
//Contact Details //
if (document.contactform.txtforename.value == "") {
rtnStr = rtnStr + " - Please enter your Forename.\n"
if (vCtrl == "") {
vCtrl = "txtforename";
}
}
if (document.contactform.txtSurname.value == "") {
rtnStr = rtnStr + " - Please enter your Surname.\n"
if (vCtrl == "") {
vCtrl = "txtSurname";
}
}
if (rtnStr != "") {
alert(rtnStr)
window.setTimeout(function () {
document.getElementById(vCtrl).focus();
}, 0);
return false;
}
else {
return true;
}
}
</script>
The problem is that vCtrl is a string which is the name of a form and not the id which document.getElementById(vCtrl).focus() is looking for. The way to fix this is to make vCtrl store the DOM element instead of a text string.
<script language="javascript">
function ValidateForm() {
var rtnStr = "";
var vCtrl = "";
//Contact Details //
if (document.contactform.txtforename.value == "") {
rtnStr = rtnStr + " - Please enter your Forename.\n"
if (vCtrl == "") {
vCtrl = document.contactform.txtforename;
}
}
if (document.contactform.txtSurname.value == "") {
rtnStr = rtnStr + " - Please enter your Surname.\n"
if (vCtrl == "") {
vCtrl = document.contactform.txtSurname;
}
}
if (rtnStr != "") {
alert(rtnStr)
vCtrl.focus();
return false;
}
else {
return true;
}
}
</script>
jsfiddle
I have a page that I need to disable the email field on. It needs to be readonly and dimmed. I've never worked with PHP before, and I assume that's what this code is, but, I'm not sure where I would disable the email field. Here's the code I have so far:
/**
* Validate our form fields
*/
var emailField, passwordField, confirmField, formfields = FormField.GetValues(%%GLOBAL_EditAccountAccountFormFieldID%%);
for (var i=0; i<formfields.length; i++) {
var rtn = FormField.Validate(formfields[i].field);
if (!rtn.status) {
alert(rtn.msg);
FormField.Focus(formfields[i].field);
return false;
}
if (formfields[i].privateId == 'EmailAddress') {
emailField = formfields[i];
} else if (formfields[i].privateId == 'Password') {
passwordField = formfields[i];
} else if (formfields[i].privateId == 'ConfirmPassword') {
confirmField = formfields[i];
}
}
if(emailField.value.indexOf("#") == -1 || emailField.value.indexOf(".") == -1) {
alert("%%LNG_AccountEnterValidEmail%%");
FormField.Focus(emailField.field);
return false;
}
if((passwordField.value != "" || confirmField.value != "") && (passwordField.value != confirmField.value)) {
alert("%%LNG_AccountPasswordsDontMatch%%");
FormField.Focus(confirmField.field);
return false;
}
return true;
}
%%GLOBAL_FormFieldRequiredJS%%
//]]>
To display a disabled texfield, you should output:
echo '<input type="email" name="name_of_field" value="email_to_display#gmail.com" disabled>';
Example:
See here (and have a look at the code):
Example
Perhaps if we had a link to the website we could have a look a it :)
function editvalidation() {
var isDataValid = true;
var currentCourseO = document.getElementById("currentCourseNo");
var newCourseNoO = document.getElementById("newCourseNo");
var currentCourseMsgO = document.getElementById("currentAlert");
var newCourseMsgO = document.getElementById("newAlert");
if (currentCourseO.value == "") {
currentCourseMsgO.innerHTML = "Please Select a Course to edit from the Course Drop Down Menu";
newCourseMsgO.innerHTML = "";
isDataValid = false;
} else {
currentCourseMsgO.innerHTML = "";
}
if (newCourseNoO.value == "") {
newCourseMsgO.innerHTML = "Please fill in the Course ID in your Edit";
isDataValid = false;
} else {
newCourseMsgO.innerHTML = "";
}
return isDataValid;
}
Hi, in the code above what I am trying to do is that if the currentCourseO.value == "" is met, then display its string message but do not display the string message for newCourseMsgO.
If currentCourseO.value == "" is not met then display the string for newCourseMsgO which is newCourseMsgO.innerHTML = "Please fill in the Course ID in your Edit"; if this validation is met.
At the moment it is not hiding the string for newCourseMsgO when currentCourseO.value == "" is met. Can I please have answer in javascript please.
It sounds like your two if-else statements should be connected, right now they are not dependent on one another. Try this:
if (currentCourseO.value == "") {
currentCourseMsgO.innerHTML = "Please Select a Course to edit from the Course Drop Down Menu";
newCourseMsgO.innerHTML = "";
isDataValid = false;
} else {
if (newCourseNoO.value == "") {
newCourseMsgO.innerHTML = "Please fill in the Course ID in your Edit";
isDataValid = false;
} else{
newCourseMsgO.innerHTML = "";
}
}