SweetAlert는 매우 유용한 JavaScript 라이브러리로, 사용자에게 경고, 확인 또는 입력 창을 표시할 수 있도록 도와줍니다. SweetAlert를 사용할 때 필수 입력 항목을 설정하는 옵션이 있습니다. 이 옵션을 사용하면 사용자가 반드시 값을 입력해야 하는 입력 항목을 만들 수 있습니다.

SweetAlert의 필수 입력 항목 설정 옵션에 대해 알아보겠습니다.

swal.fire() 메소드

SweetAlert를 사용하여 알람을 생성하려면 swal.fire() 메소드를 사용해야 합니다. 이 메소드는 다양한 옵션을 설정할 수 있습니다. 필수 입력 항목 설정을 위해 input 속성을 사용합니다.

swal.fire({
    title: '필수 입력 항목',
    html: '<input type="text" id="myInput" class="swal2-input">',
    focusConfirm: false,
    preConfirm: () => {
        const inputValue = document.getElementById('myInput').value;
        if (!inputValue) {
            swal.showValidationMessage('값을 입력해야 합니다.');
        }
    }
});

input 속성

input 속성은 SweetAlert의 알람 내부에 삽입할 입력 요소를 정의합니다. 이 예제에서는 <input> 요소를 사용하여 텍스트 입력란을 만듭니다.

preConfirm 콜백 함수

preConfirm은 SweetAlert 모달이 사라지기 전에 실행되는 콜백 함수입니다. 이 함수 내에서 사용자가 입력한 값을 검증하고, 입력값이 없을 경우 알람 메시지를 표시합니다. 필요에 따라 이 코드를 커스터마이징하여 추가 검증 로직을 구현할 수도 있습니다.

위의 코드에서는 document.getElementById('myInput').value를 사용하여 입력된 값을 가져옵니다.

실행결과

아래는 SweetAlert를 사용한 필수 입력 항목의 실행 결과입니다.

위의 예제에서는 사용자가 값 입력을 하지 않으면 알람 아래에 “값을 입력해야 합니다.”라는 메시지가 표시됩니다.

SweetAlert의 필수 입력 항목 설정 옵션을 사용하면 사용자가 값을 입력하지 않을 경우 경고 메시지를 표시하고, 필수 입력이 필요한 상황에서 사용자에게 알림을 전달할 수 있습니다.

더 자세한 정보와 사용 예제는 SweetAlert 공식 문서를 참조하시기 바랍니다.