SweetAlert2：其中一个字段需要验证

Question

我正在尝试对表单中的一个字段执行验证。

只有当该字段的值存在时，我才能调用 API，否则将抛出错误消息。

我尝试了 SweetAlert2 网站上的各种示例。我只想验证其中一个字段。

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:"<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',
            preConfirm: (login) => {
              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');
              }
            });
            });
        }
      })

Answer 1

如果你只是想确保第一个输入（即

swal-input2

）不为空，那么你只需要像这样添加

preConfirm

：

    preConfirm: () => {
      if (document.getElementById('swal-input2').value) {
         // Handle return value 
      } else {
        Swal.showValidationMessage('First input missing')   
      }
    }

你可以在这里找到工作解决方案

Answer 2

对于那些试图让每个输入都具有必需属性的人，试试这个：

      inputAttributes: {
        input: 'number',
        required: 'true'
      }

Answer 3

大家好，这里已经修复了相同的代码示例：

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:"<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',
            preConfirm: () => {

        if((document.getElementById('swal-input2').value == "") || (document.getElementById('swal-input2').value == '') || ((document.getElementById('swal-input2').value == null)) ){
          Swal.showValidationMessage(
            `ID is a required field`
          )
        }
      }
      }).then((result) => {


      request-string = {
        "Request":
          [
            {
              "COL1": VALUE1,
              "COL2": VALUE2,
              "COL3": VALUE3,
              "COL4": VALUE4,
              "COL5" : VALUE5,
              "COL6" : VALUE6,
              "COL7": VALUE7
            }
          ]
      };
   ;
      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);
          this.setState({ state: response_jsonObj });

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

      swal({
        title: "Request Submitted Successfully!",
        icon: "success",
        confirmButtonText: 'OK'
      }).then((okay) => {
        if (okay) {
          history.push('/page1');
          history.push('/page2');
        }
      });
      });

Answer 4

如果您使用单个输入字段作为文本 |电邮 |数字（在我的例子中是数字）

input: 'number' 你可以使用

inputValidator 或 inputAttributes

inputAttributes: {
     min: 0,
     max: 99999999
},
inputValidator:{
     return 'The input value must be greater than 200';
}