윅스 (Wix) 코딩 강의 중급 (Intermediate) - 유효성 검사 만들기 (Custom Validations) - 데이터 (Data)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 유효성 검사 만들기 (Custom Validations) - 데이터 (Data)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 유효성 검사 만들기 (Custom Validations) - 데이터 (Data)

강의 내용 요약

다음의 예제는 Wix 윅스 무료 홈페이지 만들기의 자바스크립트 (Javascript) 코딩 기능을 활용할 수 있는 Corvid by Wix (윅스 코딩 - 콜비드) 를 활용하여 만듭니다.

 

웹사이트 내의 방문자 및 이용자가 회원 가입이나 설문 조사를 진행하는 동안 양식에 맞는 형식의 정보를 넣는 지를 확인하는 유효성 검사를 하는 기능을 만듭니다.

 

예제 보러가기 (View Example)

HOME | show-v2-custom-valid

 

예제 에디터 확인하기 (Edit Now)

Log In | Wix

 

 

강의 내용 만드는법

만들고자 하는 윅스 사이트에 다음과 같은 구성 요소들이 필요합니다.

• 입력란 상자
• 버튼
• 데이터베이스 컬렉션
• 데이터셋

 

코드 (Code)

Home

$w.onReady(function () {

	const validateEmail = (otherEmailElementId) => (value, reject) => {
		let otherEmailElement = $w(otherEmailElementId);
	 	if (value === otherEmailElement.value) {
  			otherEmailElement.validity.valid = true;
  			otherEmailElement.resetValidityIndication();
	    	return;
	  	} 
	  	console.log("Email and Confirm Your Email fields do not match");
	  	otherEmailElement.validity.valid = false;
	  	otherEmailElement.updateValidityIndication();
	  	reject("Email and Confirm Email fields do not match");
	};
	$w("#emailConfirmInput").onCustomValidation(validateEmail("#emailInput"));
	$w("#emailInput").onCustomValidation(validateEmail("#emailConfirmInput"));
	
	$w('#dataset1').onBeforeSave(() => {
		if (!($w('#firstName').valid && $w('#lastName').valid && $w('#emailInput').valid &&
			  $w('#phone').valid && $w('#address').valid)) {

			let validationMessage = '';

			if (!$w('#firstName').valid || !$w('#lastName').valid)
				validationMessage += 'Please enter your name\n';

			if (!$w('#emailInput').valid) {
				if (!$w('#emailInput').value)
					validationMessage += 'Please enter an email address\n';
				else if ($w('#emailInput').value !== $w("#emailConfirmInput").value) {
					validationMessage += 'Email and Confirm Email fields do not match\n';
				}	
			}

			if (!$w('#phone').valid)
				validationMessage += 'Please enter a valid phone number\n';

			if (!$w('#address').valid)
				validationMessage += 'Please enter an address\n';

			$w('#validationMessages').text = validationMessage;
			$w('#validationMessages').expand();
		}
		else
			$w('#validationMessages').collapse();
	});
	
});

 

API

$w.ValidatableMixin API

$w.ValidatableMixin - Corvid API Reference

 

Corvid by Wix (윅스 코딩 - 콜비드) 개발자 모드/도구 활성화하는 방법

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

 

 

연관된 토픽)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 기본 설문란 만들기 (Basic Form) - 데이터 (Data)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 축소 확장 폼 만들기 (Collapsing Form) - 데이터 (Data)

윅스 (Wix) 코딩 중급 (Intermediate) - 캐스캐이딩 선택란 만들기 (Cascading Form) - 데이터 (Data)

 

 

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

콜비드 - 윅스 코딩 (Corvid - Wix coding)

Custom Validations | Corvid by Wix Examples | Wix.com