Sweetalert2: Sweetalert2: Required Input field is not working

[snsarma]

Current behavior

The sweet alert 2 pops up a form with 2 fields with labels ID and Notes As mentioned in the attribute one of them is required as per input tags so ID is a mandatory field and only after entering the value in the ID field should it display the success pop-up but that isn't happening even after mentioning required in the input tag. The current behavior is irrespective of whether anything is entered or not it is moving to the next pop-up , How do I resolve this ? Your help is much appreciated

Expected behavior

As mentioned in the attribute one of them is required as per input tags so ID is a mandatory field and only after entering the value in the ID field should it display the success pop-up

Live demo

Swal.fire({
        title: 'Are you sure you want to Save the Notes?',
        type: 'info',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes'
      }).then((result) => {
        if (result.value) {
          Swal.fire( {
            title: 'Notes',
              html:"<div class='b'><p>ID</p></div><input id='swal-input2' class='swal2-input' required/><div class='b'><p>Notes</p></div><input id='swal-input1' class='swal2-input' autofocus minlength='500' >",
            confirmButtonText: 'Save'   
            }).then((result) => {
              swal({
              title: " This is processed!",
              icon: "success",
              confirmButtonText: 'OK'
            }).then((okay) => {
              if (okay) {
                history.push('/page1');
                history.push('/page2');
              }
            });
            });
        }
      })

Regards
Shravya
Has SweetAlert2 helped you create an amazing application? You can show your support by making a donation:

• https://www.paypal.me/limonte

[gverni]

Hi @snsarma Sweetalert2 does not attribute any special meaning to the required attribute of the input tag. If you want to validate your input you should use the preConfirm property of SweetAlert2. You can have a look at the example here.

In your case in the preConfirm function you need to check that the required field(s) is correctly filled. If not, you can call showValidationMessage(error) to show an error and prevent the swal promise from resolving.

[snsarma]

@gverni

Thanks for the inputs and pointing it out , I tried things similar to the example there but didn't work for me, The way I am trying to do it by emulating the example it doesn't seem to resolve my issue. I am here with attaching my code :
I want to check if the ID field has a value or not and if not then it should throw an error to the UI , if not extract the value and send it to the API to perform the required tasks. I am not able to perform the check on the required field

Swal.fire({
title: 'Are you sure you want to Save the Notes?',
type: 'info',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes'
}).then((result) => {
console.log('result.value',result.value);
if (result.value) {
Swal.fire( {
title: 'Download Notes',
html:"

ID

Notes

confirmButtonText: 'Save',
preConfirm: (document.getElementById(swal-input2).value) => {
console.log('document.getElementById(swal-input2).value',document.getElementById('swal-input2').value);
request_string = {
"Request":
[
{
"Col1": "value1",
"Col1": "value2",
"Col1": document.getElementById('swal-input2').value,
"Col1": document.getElementById('swal-input1').value,

        }
      ]
  };
   fetch('API_URL', {
    headers: {
      'Accept': 'application/json, text/plain, application/xml,  */*',
      'Content-Type': 'application/json',
      'Access-Control-Allow-Headers': 'Content-Type',
    },
    method: 'POST',
    body: JSON.stringify(request_string)
  }
  ).then(response => {
    if (response.status !== 200) {
       return;
    }
    response.text().then(data => {

      response_data = data;
      response_jsonObj = JSON.parse(response_data);

    });
  }).catch(error => this.setState({ error }));

},
allowOutsideClick: () => !Swal.isLoading()

        }).then((result) => {
          swal({
          title: " Your  request is being processed!",
          icon: "success",
          confirmButtonText: 'OK'
        }).then((okay) => {
          if (okay) {
            history.push('/page1');
            history.push('/page2');
          }
        });
        });
    }
  })

[limonte]

https://stackoverflow.com/questions/ask