function validateDomain(_, options) {
if (options.name === 'email') {
const email = options.value;
if (!email) return;
const domain = email.trim().substring(email.indexOf('@') + 1);
if (domain !== 'surveyjs.io') {
options.error = 'Please enter an e-mail address hosted at surveyjs.io.';
}
}
}
function SurveyComponent() {
const survey = new Survey.Model(json);
survey.onComplete.add((sender, options) => {
console.log(JSON.stringify(sender.data, null, 3));
});
survey.data = data;
survey.onValidateQuestion.add(validateDomain);
return <SurveyReact.Survey model={survey} />;
}
const root = ReactDOM.createRoot(document.getElementById('surveyElement'));
root.render(<SurveyComponent />);
<!DOCTYPE html>
<html>
<head>
<meta name="robots" content="noindex" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/survey-core@1.12.3/survey.core.min.js"></script>
<script src="https://unpkg.com/survey-core@1.12.3/survey.i18n.min.js"></script>
<script src="https://unpkg.com/survey-core@1.12.3/themes/index.min.js"></script>
<script src="https://unpkg.com/survey-react-ui@1.12.3/survey-react-ui.min.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/survey-core@1.12.3/defaultV2.min.css"
/>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div
id="surveyElement"
style="
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-height: 100%;
height: 100%;
"
></div>
<script src="./json.js"></script>
<script src="./data.js"></script>
<script type="text/babel" src="./index.js"></script>
</body>
</html>
/* You can add your custom css here.*/
h4.sd-title{
display: none;
}
const json = {
title: 'Default Global Survey',
logoWidth: '',
logoHeight: '',
logoPosition: 'right',
focusFirstQuestionAutomatic: true,
completedHtml: '<h3>Thank you for completing the survey</h3>',
loadingHtml: '<h3>Loading Survey...</h3>',
pages: [
{
name: 'personal_PAGE',
title: 'Personal Info',
navigationTitle: 'Personal Info',
elements: [
{
type: 'panel',
name: 'personal_name',
title: 'Name',
elements: [
{
type: 'text',
name: 'personal_firstName',
title: 'First',
isRequired: true,
},
{
type: 'text',
name: 'personal_middleName',
minWidth: '10px',
maxWidth: '50%',
startWithNewLine: false,
title: 'Middle Initial',
size: 1,
},
{
type: 'text',
name: 'personal_lastName',
startWithNewLine: false,
title: 'Last',
isRequired: true,
},
{
type: 'dropdown',
name: 'personal_title',
title: 'Title',
choices: [
'Mr.',
'Ms.',
'Mrs.',
'Miss',
'Dr.',
'Prof.',
'Rev.',
'Sr.',
'Br.',
'Fr.',
'Rav.',
'Capt.',
'Sgt.',
'Hon.',
],
},
{
type: 'dropdown',
name: 'personal_suffix',
startWithNewLine: false,
title: 'Suffix',
choices: [
'Jr.',
'Sr.',
'I',
'II',
'III',
'IV',
'V',
'VI',
'VII',
'VIII',
'IX',
'X',
'Esquire',
'PhD',
],
},
],
},
{
type: 'panel',
name: 'personal_otherName',
title: 'Other/Maiden Name',
elements: [
{
type: 'text',
name: 'personal_otherfirstName',
title: 'First',
},
{
type: 'text',
name: 'personal_otherMiddleInitial',
minWidth: '10px',
maxWidth: '50%',
startWithNewLine: false,
title: 'Middle Initial',
size: 1,
},
{
type: 'text',
name: 'personal_otherLastName',
startWithNewLine: false,
title: 'Last',
},
{
type: 'dropdown',
name: 'personal_otherTitle',
title: 'Title',
choices: [
'Mr.',
'Ms.',
'Mrs.',
'Miss',
'Dr.',
'Prof.',
'Rev.',
'Sr.',
'Br.',
'Fr.',
'Rav.',
'Capt.',
'Sgt.',
'Hon.',
],
},
{
type: 'dropdown',
name: 'personal_otherSuffix',
startWithNewLine: false,
title: 'Suffix',
choices: [
'Jr.',
'Sr.',
'I',
'II',
'III',
'IV',
'V',
'VI',
'VII',
'VIII',
'IX',
'X',
'Esquire',
'PhD',
],
},
],
},
{
type: 'panel',
name: 'personal_contactInfo',
title: 'Contact Information',
elements: [
{
type: 'text',
name: 'personal_email',
title: 'Email Address',
isRequired: true,
inputType: 'email',
},
{
type: 'panel',
name: 'personal_address',
title: 'Address',
elements: [
{
type: 'text',
name: 'personal_addressLine1',
title: 'Street Address',
},
{
type: 'text',
name: 'personal_addressLine2',
title: 'Line 2',
},
{
type: 'text',
name: 'personal_city',
title: 'City',
},
{
type: 'dropdown',
name: 'personal_state',
minWidth: '100px',
maxWidth: '25%',
startWithNewLine: false,
title: 'State',
choices: [
'AK',
'AL',
'AR',
'AS',
'AZ',
'CA',
'CO',
'CT',
'DC',
'DE',
'FL',
'GA',
'GU',
'HI',
'IA',
'ID',
'IL',
'IN',
'KS',
'KY',
'LA',
'MA',
'MD',
'ME',
'MI',
'MN',
'MO',
'MP',
'MS',
'MT',
'NC',
'ND',
'NE',
'NH',
'NJ',
'NM',
'NV',
'NY',
'OH',
'OK',
'OR',
'PA',
'PR',
'RI',
'SC',
'SD',
'TN',
'TT',
'TX',
'UT',
'VA',
'VI',
'VT',
'WA',
'WI',
'WV',
'WY',
],
},
{
type: 'text',
name: 'personal_postalCode',
minWidth: '100px',
maxWidth: '25%',
startWithNewLine: false,
title: 'Postal Code',
maxLength: 6,
},
],
},
{
type: 'text',
name: 'personal_phone',
minWidth: '100px',
maxWidth: '25%',
title: 'Phone Number',
inputType: 'tel',
maskType: 'pattern',
maskSettings: {
pattern: '(999) 999-9999',
},
},
{
type: 'dropdown',
name: 'personal_phoneType',
minWidth: '75px',
maxWidth: '20%',
startWithNewLine: false,
title: 'Type',
choices: ['Fax', 'Home', 'Mobile', 'Other', 'Text', 'Work'],
},
],
},
],
},
{
name: 'work_PAGE',
title: 'Work Experience',
navigationTitle: 'Work Experience',
elements: [
{
type: 'paneldynamic',
name: 'work',
title: 'Employer',
templateElements: [
{
type: 'text',
name: 'work_position',
title: 'Position Title',
isRequired: true,
},
{
type: 'text',
name: 'work_employerName',
startWithNewLine: false,
title: 'Employer Name',
isRequired: true,
autocomplete: 'organization',
},
{
type: 'text',
name: 'work_city',
title: 'City',
},
{
type: 'dropdown',
name: 'work_state',
minWidth: '75px',
maxWidth: '20%',
startWithNewLine: false,
title: 'State',
choices: [
'AK',
'AL',
'AR',
'AS',
'AZ',
'CA',
'CO',
'CT',
'DC',
'DE',
'FL',
'GA',
'GU',
'HI',
'IA',
'ID',
'IL',
'IN',
'KS',
'KY',
'LA',
'MA',
'MD',
'ME',
'MI',
'MN',
'MO',
'MP',
'MS',
'MT',
'NC',
'ND',
'NE',
'NH',
'NJ',
'NM',
'NV',
'NY',
'OH',
'OK',
'OR',
'PA',
'PR',
'RI',
'SC',
'SD',
'TN',
'TT',
'TX',
'UT',
'VA',
'VI',
'VT',
'WA',
'WI',
'WV',
'WY',
],
},
{
type: 'dropdown',
name: 'work_country',
minWidth: '75px',
maxWidth: '30%',
startWithNewLine: false,
title: 'Country',
choices: ['USA', 'Canada', 'Mexico'],
},
{
type: 'text',
name: 'work_phone',
title: 'Phone',
inputType: 'tel',
maskType: 'pattern',
maskSettings: {
pattern: '(999) 999-9999',
},
},
{
type: 'text',
name: 'work_email',
startWithNewLine: false,
title: 'Email',
inputType: 'email',
},
{
type: 'dropdown',
name: 'work_type',
title: 'Type of Experience',
isRequired: true,
choices: [
{
value: 'ProfessionalWork',
text: 'Professional Work Experience',
},
{
value: 'OtherExperience',
text: 'Other Experience',
},
{
value: 'StudentTeachingOrInternship',
text: 'Student Teaching or Internship',
},
],
},
{
type: 'tagbox',
name: 'work_gradeLevels',
title: 'Grade Levels',
choices: [
{
value: 'PK',
text: 'Prekindergarten',
},
{
value: 'KG',
text: 'Kindergarten',
},
{
value: '01',
text: 'Grade 1',
},
{
value: '02',
text: 'Grade 2',
},
{
value: '03',
text: 'Grade 3',
},
{
value: '04',
text: 'Grade 4',
},
{
value: '05',
text: 'Grade 5',
},
{
value: '06',
text: 'Grade 6',
},
{
value: '07',
text: 'Grade 7',
},
{
value: '08',
text: 'Grade 8',
},
{
value: '09',
text: 'Grade 9',
},
{
value: '10',
text: 'Grade 10',
},
{
value: '11',
text: 'Grade 11',
},
{
value: '12',
text: 'Grade 12',
},
{
value: '13',
text: 'Grade 13 (Prep',
},
{
value: 'UG',
text: 'Ungraded',
},
{
value: 'AE',
text: 'Adult Education',
},
'M',
'N',
],
},
{
type: 'text',
name: 'work_startDate',
title: 'Start Date',
isRequired: true,
inputType: 'month',
},
{
type: 'text',
name: 'work_endDate',
startWithNewLine: false,
title: 'End Date',
isRequired: true,
inputType: 'month',
},
{
type: 'checkbox',
name: 'work_current',
title: 'I currently work here:',
choices: ['Yes'],
},
{
type: 'comment',
name: 'work_summary',
title: 'Responsibilities/Accomplishments at this position:',
},
],
},
],
},
{
name: 'education_PAGE',
title: 'Education',
navigationTitle: 'Education',
elements: [
{
type: 'paneldynamic',
name: 'education',
title: 'Education History',
templateElements: [
{
type: 'text',
name: 'education_institution',
title: 'School',
isRequired: true,
},
{
type: 'text',
name: 'education_institutionId',
visible: false,
title: 'Institution ID',
readOnly: true,
},
{
type: 'text',
name: 'education_address',
visible: false,
title: 'Address',
},
{
type: 'text',
name: 'education_city',
title: 'City',
},
{
type: 'dropdown',
name: 'education_state',
title: 'State',
isRequired: true,
choices: [
'AK',
'AL',
'AR',
'AS',
'AZ',
'CA',
'CO',
'CT',
'DC',
'DE',
'FL',
'GA',
'GU',
'HI',
'IA',
'ID',
'IL',
'IN',
'KS',
'KY',
'LA',
'MA',
'MD',
'ME',
'MI',
'MN',
'MO',
'MP',
'MS',
'MT',
'NC',
'ND',
'NE',
'NH',
'NJ',
'NM',
'NV',
'NY',
'OH',
'OK',
'OR',
'PA',
'PR',
'RI',
'SC',
'SD',
'TN',
'TT',
'TX',
'UT',
'VA',
'VI',
'VT',
'WA',
'WI',
'WV',
'WY',
],
},
{
type: 'dropdown',
name: 'education_country',
minWidth: '75px',
maxWidth: '30%',
startWithNewLine: false,
title: 'Country',
isRequired: true,
choices: ['USA', 'Canada', 'Mexico'],
},
{
type: 'text',
name: 'education_startDate',
title: 'Start Date',
inputType: 'month',
},
{
type: 'text',
name: 'education_endDate',
startWithNewLine: false,
title: 'End Date',
inputType: 'month',
},
{
type: 'text',
name: 'education_level',
visible: false,
title: 'Education Level',
},
{
type: 'text',
name: 'education_degree',
title: 'Degree',
},
{
type: 'text',
name: 'education_major',
title: 'Major',
},
{
type: 'text',
name: 'education_minor',
startWithNewLine: false,
title: 'Minor',
},
{
type: 'checkbox',
name: 'education_degreeObtained',
title: 'Degree obtained?',
choices: ['Yes'],
},
{
type: 'text',
name: 'education_nonDegreeCreditsEarned',
visible: false,
visibleIf: '{panel.education_degreeObtained} empty',
title: 'Non-degree credits earned',
min: 1,
max: 200,
minErrorText: 'The value should not be less than 0',
maskType: 'numeric',
maskSettings: {
min: 0,
max: 200,
},
},
{
type: 'text',
name: 'education_gpa',
minWidth: '75px',
maxWidth: '25%',
title: 'GPA',
min: 1,
max: 200,
minErrorText: 'The value should not be less than 0',
maskType: 'numeric',
maskSettings: {
min: 0,
max: 1001,
},
},
{
type: 'text',
name: 'education_gpaMax',
minWidth: '75px',
maxWidth: '25%',
startWithNewLine: false,
title: 'GPA Max',
min: 1,
max: 200,
minErrorText: 'The value should not be less than 0',
maskType: 'numeric',
maskSettings: {
min: 0,
max: 1000,
},
},
],
},
],
},
{
name: 'eeo_PAGE',
title: 'EEO',
navigationTitle: 'EEO',
elements: [
{
type: 'panel',
name: 'eeo',
elements: [
{
type: 'expression',
name: 'eeo_statement_EXPRESSION',
title:
'Government agencies require us to collect information and file periodic reports regarding the gender, race and /or ethnicity of applicants. The data collected enables us to analyze our hiring processes, and to ensure equal employment opportunity. The information requested below is voluntary and will not be available to individuals involved in the hiring process. This information is kept separate from your application so that it remains confidential.',
hideNumber: true,
useGrouping: false,
},
{
type: 'radiogroup',
name: 'eeo_gender',
title: 'Gender',
isRequired: true,
choices: [
{
value: 'male',
text: 'Male',
},
{
value: 'nonBinary',
text: 'Non-Binary',
},
{
value: 'declineToAnswer',
text: 'Decline to Answer',
},
],
},
{
type: 'radiogroup',
name: 'eeo_ethnicity',
title: 'Ethnic Group',
isRequired: true,
choices: [
{
value: 'hispanicLatino',
text: 'Hispanic or Latino',
},
{
value: 'notHispanicLatino',
text: 'Not Hispanic or Latino',
},
{
value: 'unknown',
text: 'Unknown',
},
],
},
{
type: 'expression',
name: 'eeo_ethnicityNotRace_EXPRESSION',
title:
'The above part of the question is about ethnicity, not race. No matter what you selected above, please continue to answer the following by marking one or more boxes to indicate what you consider your race to be.',
hideNumber: true,
useGrouping: false,
},
{
type: 'checkbox',
name: 'eeo_racialGroup',
title: 'Racial Group',
isRequired: true,
choices: [
{
value: 'americanIndianAlaskaNative',
text: 'American Indian or Alaska Native',
},
{
value: 'asian',
text: 'Asian',
},
{
value: 'blackAfricanAmerican',
text: 'Black or African American',
},
{
value: 'nativeHawaiianOtherPacificIslander',
text: 'Native Hawaiian or Pacific Islander',
},
{
value: 'white',
text: 'White',
},
{
value: 'hispanicLatinoSpanishOrigin',
text: 'Hispanic or Latino',
},
{
value: 'middleEasternNorthAfrican',
text: 'Middle Eastern or North African',
},
{
value: 'twoOrMore',
text: 'Two Or More',
},
{
value: 'unknown',
text: 'Unknown',
},
],
},
],
},
],
},
{
name: 'disability_PAGE',
title: 'Disability',
navigationTitle: 'Disability',
elements: [
{
type: 'panel',
name: 'disability',
elements: [
{
type: 'expression',
name: 'disability_header_EXPRESSION',
title:
'To comply with federal regulations such as the Americans with Disabilities Act (ADA) and Section 503 of the Rehabilitation Act, the following information is requested solely for government reporting purposes and to support legal requirements to promote a workplace that supports diversity and inclusion. This information will not be used in evaluating your employment application. It is voluntary and will be kept confidential.',
hideNumber: true,
useGrouping: false,
},
{
type: 'radiogroup',
name: 'disability_status',
title: 'Do you have a disability?',
isRequired: true,
choices: [
{
value: 'yes',
text:
'Yes, I have a disability (or previously had a disability)',
},
{
value: 'no',
text: 'No, I do not have a disability',
},
{
value: 'declineToAnswer',
text: 'I do not want to answer',
},
],
},
{
type: 'checkbox',
name: 'disability_type',
visibleIf: "{disability_status} = 'yes'",
title: 'Please indicate your condition(s) below:',
choices: [
{
value: 'visionDisability',
text: 'Blindness or visual impairment',
},
{
value: 'hearingDisability',
text: 'Deafness or hearing impairment',
},
{
value: 'mobilityDisability',
text: 'Mobility impairments',
},
{
value: 'cognitiveDisability',
text: 'Cognitive impairments',
},
{
value: 'mentalHealthDisability',
text: 'Mental Health Disorders',
},
{
value: 'chronicHealthDisability',
text: 'Chronic Health Conditions',
},
{
value: 'other',
text: 'Other disabilities',
},
],
},
],
},
],
},
{
name: 'references_PAGE',
title: 'References',
navigationTitle: 'References',
elements: [
{
type: 'paneldynamic',
name: 'references',
title: 'Reference',
templateElements: [
{
type: 'text',
name: 'references_name',
title: 'Name',
isRequired: true,
},
{
type: 'dropdown',
name: 'references_relation',
startWithNewLine: false,
title: 'Relationship',
choices: [
{
value: 'relationship1',
text: 'Relationship 1',
},
{
value: 'relationship2',
text: 'Relationship 2',
},
{
value: 'relationship3',
text: 'Relationship 3',
},
],
},
{
type: 'text',
name: 'references_employer',
title: 'Employer',
},
{
type: 'text',
name: 'references_email',
startWithNewLine: false,
title: 'Email',
isRequired: true,
inputType: 'email',
},
{
type: 'text',
name: 'references_phone',
title: 'Phone',
inputType: 'tel',
},
{
type: 'radiogroup',
name: 'references_phoneType',
startWithNewLine: false,
title: 'Phone Type',
choices: [
{
value: 'Item 1',
text: 'Home',
},
{
value: 'Item 2',
text: 'Work',
},
{
value: 'Item 3',
text: 'Cell',
},
],
},
{
type: 'file',
name: 'references_file',
title: 'Supporting Documentation (Letter of Recommendation)',
},
],
},
],
},
],
sendResultOnPageNext: true,
showNavigationButtons: 'none',
showPrevButton: false,
showPageTitles: true,
showCompletedPage: false,
showQuestionNumbers: 'off',
progressBarShowPageNumbers: true,
allowCompleteSurveyAutomatic: false,
checkErrorsMode: 'onComplete',
autoGrowComment: true,
pageNextText: 'Next Page',
completeText: 'Submit Application',
previewText: 'Review Answers',
editText: 'Edit Answers',
questionsOnPageMode: 'singlePage',
gridLayoutEnabled: true,
showTOC: true,
tocLocation: 'left',
};
const data = {
personal_firstName: "Geovanny",
personal_lastName: "Adams",
personal_title: "Mr.",
personal_email: "your.email+fakedata50205@gmail.com",
personal_addressLine1: "80635 Sydney Trail",
personal_addressLine2: "193 Theodore Hill",
personal_city: "Jersey City",
personal_state: "DE",
personal_postalCode: "050330",
personal_phone: "0105555555",
personal_phoneType: "Home"
};