Adding validation to text field - multiple short text

More
5 years 5 months ago #66528 by zahidansari
Hi All,

I have a question which asks the individual for their email and phone number(question type is multiple short text). But as I can see that there is no validation for particular option box. Can anyone suggest how can I accomplish that.

I have tried everything from past 2 week with no success. I am able to prompt user with alert box that email is not valid but then after clicking ok it moves to next page.


Any suggestions will be highly appreciated.
Thanks

Please Log in to join the conversation.

More
5 years 5 months ago #66547 by tpartner
You will need to use JavaScript to interrupt the Next/Submit function (form submission) and validate the inputs. If the validation fails you can abort the Next/Submit function.

Something like this. Replace "11111" with the survey ID, "22" with the group ID, "33" with the question ID and "44" with the sub-question ID.
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function () {
 
		// Interrupt the submit function
		$('form#limesurvey').submit(function () {
			// Override the built-in "disable navigation buttons" feature
			$('#moveprevbtn, #movenextbtn, #movesubmitbtn').attr('disabled', '');
 
			if ($('#answer11111X22X3344').val() != 'some validation') {
				alert ('The email is invalid!');
				return false;
			} else {
				return true;
			}
		});
	});
</script>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
5 years 5 months ago #66553 by Mazi
I recommend to split this up into two short text fields and then use a regular expression for data validation: docs.limesurvey.org/Using+regular+expres...tions+for+LimeSurvey


Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"

Please Log in to join the conversation.

More
5 years 5 months ago - 5 years 5 months ago #66599 by zahidansari
@tpartner,

Well I tried your code and I have jumped over the major road block and it is interupting the submit function but dont know why it is not validating the email field.:angry:
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function () {
 
	var emailExp = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
        var email    = $("#answer31822X121X22232");
        var flag     = emailExp.test(email.val());
 
		// Interrupt the submit function
 
		$('form#limesurvey').submit(function () {
			// Override the built-in "disable navigation buttons" feature
			$('#moveprevbtn, #movenextbtn, #movesubmitbtn').attr('disabled', '');
                        //alert("FLAG ="+flag);
			if (flag) {
				return true;
			} else {
                                alert ('The email is invalid!');
				return false;
			}
		});
	});
</script>


Well the flag value is always coming as false...:blink:
Last Edit: 5 years 5 months ago by zahidansari.

Please Log in to join the conversation.

More
5 years 5 months ago #66616 by Mazi
I'm no JS expert but maybe you have to quote the expression so that /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/
becomes
"/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/"


Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"

Please Log in to join the conversation.

More
5 years 5 months ago #66632 by tpartner
You need to move the "email" and "flag" vars into the submit function so they are not created when the page loads.
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function () {
 
		var emailExp = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
 
		// Interrupt the submit function
		$('form#limesurvey').submit(function () {
			// Override the built-in "disable navigation buttons" feature
			$('#moveprevbtn, #movenextbtn, #movesubmitbtn').attr('disabled', '');
 
			var email = $("#answer31822X121X22232");
			var flag = emailExp.test(email.val());
 
			if (flag) {
				return true;
			} else {
				alert ('The email is invalid!');
				return false;
			}
		});
	});
</script>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
5 years 5 months ago #66639 by zahidansari
Thanks Tony you have saved the day..

its resolved

Please Log in to join the conversation.

More
5 years 5 months ago #66653 by Mazi

zahidansari wrote: Thanks Tony you have saved the day..

its resolved

You're welcome!

If our hints have been helpful and you enjoy limesurvey please consider a donation to the team .
We do all this in our free time and you don't have to pay a penny for this software.

Without your help we can't keep this project alive.


Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"

Please Log in to join the conversation.

More
5 years 5 months ago #67835 by miradoro
Where do u place this code?

Please Log in to join the conversation.

More
5 years 5 months ago #67836 by tpartner
In the source of any question on the page. See - docs.limesurvey.org/tiki-index.php?page=..._etc._in_LimeSurvey_

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
5 years 2 months ago #71524 by sameera
Hello,

I am new to Limesurvey and thank you for this awesome software.:)

I was trying to use above java script to validate 'time' in a multiple array question.

However when I insert this script to array question, the respective input field become a mandatory field. User is forced to insert an input to the field. But I want to keep it as a non-mandatory field.

So is there a way to execute validation function only if the user enter any text input into the field?

Can anyone help to resolve this issue. Thank you in advance.

Please Log in to join the conversation.

More
5 years 2 months ago #71525 by tpartner
Try this:
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function () {
 
		var emailExp = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
 
		// Interrupt the submit function
		$('form#limesurvey').submit(function () {
			// Override the built-in "disable navigation buttons" feature
			$('#moveprevbtn, #movenextbtn, #movesubmitbtn').attr('disabled', '');
 
			var email = $("#answer31822X121X22232");
			var flag = emailExp.test(email.val());
 
			if (flag || email == '') {
				return true;
			} else {
				alert ('The email is invalid!');
				return false;
			}
		});
	});
</script>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
5 years 2 months ago #71526 by sameera
Thank you Tony for your quick reply.

I tried you script. But still I am forced to enter email address in the text field.I can not navigate to next page without answering to this question.

This is another java script that I found in this forum. It is also used for the same validation function multiple short text questions. It is executed only if I enter some input into the text field. But unfortunately I can not find a way to adapt this script for multiple array questions.

your thoughts? Thank you.

Here is the said script

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

// Call the email function with the question ID and the row number
emailTest(24,1);

function emailTest(qID, inputNum) {

// Interrupt next/submit function
$('#movenextbtn, #movesubmitbtn').click(function(){

// Some vars - modify as required
var emailMatch = /^([1-9]|1[0-2]|0[1-9]){1}(:[0-5][0-9][aApP][mM]){1}$/;
var msg1 = 'Please enter time in correct format.';

// Test the input
var emailInput = $('#question'+qID+' li:eq('+(inputNum-1)+') input.text').val();
if(emailInput != '' && !emailMatch.test(emailInput)) {
alert(msg1);
$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({'background':'pink'});
return false;
}
else {
$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({'background':''});
return true;
}
});
}
});

</script>

Please Log in to join the conversation.

More
5 years 2 months ago #71528 by tpartner
Assuming that the ID of the input field is "answer31822X121X22232":
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function() {
 
		// Call the email function with the input ID
		emailTest('answer31822X121X22232');
 
		function emailTest(inputID) {
 
			// Interrupt next/submit function
			$('#movenextbtn, #movesubmitbtn').click(function(){
 
				// Some vars - modify as required
				var emailMatch = /^([1-9]|1[0-2]|0[1-9]){1}(:[0-5][0-9][aApP][mM]){1}$/;
				var msg1 = 'Please enter time in correct format.';
 
				// Test the input
				var emailInput = $('#'+inputID+'').val();
				if(emailInput != '' && !emailMatch.test(emailInput)) {
					alert(msg1);
					$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({'background':'pink'});
					return false;
				}
				else {
					$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').css({'background':''});
					return true;
				}
			});
		}
	});
 
</script>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: sameera

Please Log in to join the conversation.

More
5 years 2 months ago #71529 by TMSWhite

zahidansari wrote: I have a question which asks the individual for their email and phone number(question type is multiple short text). But as I can see that there is no validation for particular option box.


This features is available in LimeSurvey 1.92 RC1. 1.92 RC2 adds support for validation within Array Multi-Flexi Text. In 1.92 RC2, there is an onchange() even that turns the background color of the input field red if it contains an invalid value.

/Tom
The following user(s) said Thank You: sameera

Please Log in to join the conversation.