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')   
      }
    }

您可以找到有效的解决方案here

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');
        }
      });
      });