Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save faisalahammad/b36ba5c81de77ac351a834ccc006472c to your computer and use it in GitHub Desktop.
Save faisalahammad/b36ba5c81de77ac351a834ccc006472c to your computer and use it in GitHub Desktop.
Display Warning Message and Disable Submit Button in Ninja Forms When Emails Match. This script checks if two email fields in a Ninja Forms form have matching values. If they do, it displays a warning message and disables the submit button, enhancing form validation. Ideal for WordPress users working with Ninja Forms who need to prevent identica…
/**
* Ninja Forms - Compare Two Field Email Address and Display Error
* @author Faisal Ahammad
*/
/**
* Form ID: replace the #nf-form-1-cont form ID with your desire form ID
* Email 1 class: add student_email or different class to the field "Email field setting → Display → Element"
* Email 2 class: add agent_email or different class to the field "Email field setting → Display → Element"
* Warning Message class: add warning_message or different class to the "HTML field setting → Display → Container"
*/
document.addEventListener("DOMContentLoaded", function () {
const formInterval = setInterval(function () {
const studentEmail = document.querySelector("#nf-form-1-cont input.student_email");
const agentEmail = document.querySelector("#nf-form-1-cont input.agent_email");
const warningMessage = document.querySelector("#nf-form-1-cont .warning_message");
const submitButton = document.querySelector("#nf-form-1-cont .submit-wrap input.ninja-forms-field");
if (studentEmail && agentEmail && warningMessage && submitButton) {
clearInterval(formInterval);
// Initially hide the warning message and enable the submit button
warningMessage.style.display = "none";
submitButton.disabled = false;
// Function to check if the email fields match
function checkEmails() {
if (studentEmail.value === agentEmail.value && studentEmail.value !== "" && agentEmail.value !== "") {
// Show the warning message and disable the submit button if the emails match
warningMessage.style.display = "block";
submitButton.disabled = true;
} else {
// Hide the warning message and enable the submit button if the emails don't match
warningMessage.style.display = "none";
submitButton.disabled = false;
}
}
studentEmail.addEventListener("input", checkEmails);
agentEmail.addEventListener("input", checkEmails);
}
}, 100);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment