How to have a custom message validity in Google recaptcha using JS? - javascript

How to have a custom message validity in Google recaptcha?
If the user didn't or forgot to checked the Google Recaptcha checkbox before clicked the submit button. There's a popup message will displayed, the the user need to check first the checkbox.
I have JS that will validate the input text box and it is working. But I don't know how to implement it in Google Recaptcha
JS:
function InvalidMsg(textbox){
if(textbox.validity.patternMismatch){
textbox.setCustomValidity('Please enter your name here');
} else if(textbox.validity.valueMissing){
textbox.setCustomValidity('This field is required');
} else {
textbox.setCustomValidity('');
}
return true;
}

You have to use the reCaptcha verify response call back. Something like this: https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit'>
You will also want to attach your error message to the reCaptcha container you are using.
var RC2KEY = 'sitekey',
doSubmit = false;
function reCaptchaVerify(response) {
if (response === document.querySelector('.g-recaptcha-response').value) {
doSubmit = true;
}
}
function reCaptchaExpired () {
/* do something when it expires */
}
function reCaptchaCallback () {
grecaptcha.render('id', {
'sitekey': RC2KEY,
'callback': reCaptchaVerify,
'expired-callback': reCaptchaExpired
});
}
document.forms['form-name'].addEventListener('submit',function(e){
if (doSubmit) {
/* submit form or do something else */
}
else {
/**
* Show your error message here.
* InvalidMsg function may not work.
* recaptcha does not have properties you are checking for.
*/
}
})

Related

jQuery - Validation

I'm having an issue with my validation process. I'm not using a standard "submit" button, rather I have <span class="button" id="print">Print</span> and jQuery listens for a click. This is the validation code I have when that "button" is clicked:
var validation = "";
function validate() {
$("#servDetails").find("input").each(function () {
if ($(this).prop("required") && $(this).val() == "") {
validation = false;
}
else {
validation = true;
}
});
$("#checklist").find("input[required]").each(function () {
if ($(this).prop("required") && $(this).val() == "") {
validation = false;
}
else {
validation = true;
}
});
}
$("#print").on("click", function() {
validate();
if (validation == false) {
alert("Please fill out all required inputs!");
return false;
}
else {
window.print();
}
});
If I click the button without filling anything out (all items blank), I get my alert as expected.
If I fill out all of the required elements, it pulls up the print dialouge as expected.
However, if I leave some of the boxes blank while others are correctly filled, it still goes to print instead of giving me the alert like I need. Any thoughts?
The code have to be rewritten, or better replace it with any validation plug-in.
But in your case, I suppose, you just forgot to return, in case you found some not filled field. So if you have any filled input it override your validation variable.
The simplest solution is to remove
else {validation = true;} code blocks, and add
validation = true;
at the beggining of the function.

Jquery select only from modal page

I have a webpage that opens a modal form. I validate the modal form using a JQuery function. The problem is that my function is checking all fields in both the modal AND the page behind it.
//validate function
function validateFields() {
var valid = true;
$('.required').each(function () {
if (!$(this).val()) {
addError(this, 'required');
valid = false;
}
});
}
//in my save function
function saveLead(){
if (validateFields()) {
//save
}
}
My validate function is checking all fields with the required class on both my page and modal. How can I get it to just use my page?
UPDATE:
this has complications because my validation function is reused on many pages and is not set up to accept a specific form to check
Is such a thing possible or do I have to do major revisions to the validation or modal in order for this to work?
You could detect the form from which the submit button is clicked. Something like the below should work.
//validate function
function validateFields($submittedForm) {
var valid = true;
$('$submittedForm .required').each(function () {
if (!$(this).val()) {
addError(this, 'required');
valid = false;
}
});
}
//in my save function
// Find the form there 'this' is the submit button
var $submittedForm = $(this).closest('form');
function saveLead($submittedForm){
if (validateFields($submittedForm)) {
//save
}
}

jQuery Validate: validate form without throwing errors about empty fields

I have a field with about eight required fields. I have some code that only enables a button if all fields are validated. Then, I have a method that checks to see if all fields are valid - only then is the button enabled.
$("#FirstName").on("keyup blur", function () {
if ($("#FirstName").length > 0) {
if ($("#FirstName").valid()) {
isFirstNameValid = true;
}
else
isFirstNameValid = false;
checkIfAllFieldsAreValid();
}
})
The issue is that the required validation field is throwing an error when I tab to the next field, because the "keyup blur" event is firing on the next field even before I start typing. What event prevents this behavior from happening?
You can leave the submit button enabled and check when the user clicks it if the form is valid or not
$("#btnCreateMyAccount").on("click", function () {
if ($("#CreateAccountForm").valid()) {
return false;
}
else
{
//submit the data
}
})
Try checking if any of the inputs are empty before validating the form.
if($("your input field").val()=="") {
return;
}

jquery validation not working on hidden fields

Working on jQuery validator initially some of the field where display none so when the user click next button the error message was showing You have missed 1 fields. Please fill before submitted this was working perfect as i expected. Because I gave ignore:".chk_Field",. But when the user click yes radio button user can able to see some more fields. without filling any of the field If user click the next button still it should say You have missed 5 fields. Please fill before submitted but currently it was saying You have missed 1 fields. Please fill before submitted this is not happening with this line of code ignore:".chk_Field",
Here is my jquery code
function apply_validation() {
$(".educationForm").validate({
ignore:".chk_Field",
onkeyup: false,
showErrors: function (errorMap, errorList) {
var errors = this.numberOfInvalids();
if (errors) {
var message = 'You have missed ' + errors + ' fields. Please fill before submitted.';
$errorMessageDiv.html(message);
$errorMessageDiv.show();
} else {
$errorMessageDiv.hide();
}
this.defaultShowErrors();
},
errorPlacement: function () {
return false;
},
highlight: function (element) {
if ($(element).is(':radio')) {
} else {
$(element).addClass('errRed');
$(".chk_field_hlt").addClass('errRed_chkb');
$('#imageUploadForm').addClass('errRed');
}
$(element).prevAll('label').find('span.required-star').addClass('text-error-red').removeClass('text-error-black');
},
unhighlight: function (element) {
if ($(element).is(':radio')) {} else {
$(element).removeClass('errRed');
$(".chk_field_hlt").removeClass('errRed_chkb');
}
$(element).prevAll('label').find('span.required-star').addClass('text-error-black').removeClass('text-error-red');
}
});
}
Here is the fiddle link
Thanks in advance
Try to put this line of code:
$("#expy").find(".chk_Field").removeClass("chk_Field");
Here:
$(".wrk_clp").click(function () {
if ($('input[name=rad_emp]:checked').val() == "yes") {
$expDiv.show();
$("#expy").find(".chk_Field").removeClass("chk_Field");
}
I just tested and it seems to work.

Add custom confirm message to standard joomla 3.0 admin toolbar button

Add custom confirm message to standard joomla 3.0 admin toolbar button.
I can get alert messages on delete when I don't selected any check boxes on detailed list.
I can get same on any button by set last parameter true in
JToolBarHelper::custom('userdetails.sendMail', 'mail.png', 'mail_f2.png', 'Send Mail', false);
I want to add a confirm message on the click event of this Button?
On view file (tpl/view file name).
<script type="text/javascript">
Joomla.submitbutton = function(task)
{
if (task == 'userdetails.sendMail')
{
if (confirm(Joomla.JText._('Do you really want to send mails to selected users?'))) {
Joomla.submitform(task);
} else {
return false;
}
}
}
</script>
Just as an addition to Suman Singh's answer, you may want to include the script in the document header, and also be able to translate the confirmation text. So, in your layout file, you can write:
$document = JFactory::getDocument();
$document->addScriptDeclaration('
Joomla.submitbutton = function(task) {
if (task == "userdetails.sendMail") {
if (confirm(Joomla.JText._("COM_YOURCOMPONENT_USERDETAILS_SENDMAIL_CONFIRMATION_TEXT"))) {
Joomla.submitform(task);
} else {
return false;
}
}
}
');
JText::script('COM_YOURCOMPONENT_USERDETAILS_SENDMAIL_CONFIRMATION_TEXT');
And of course in the language/en-GB/en-GB.com_yourcomponent.ini file:
COM_YOURCOMPONENT_USERDETAILS_SENDMAIL_CONFIRMATION_TEXT="Are you sure you want to send mails to the selected users?"

Categories