Validation SweetAlert2:其中一个字段需要验证

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

只有当该字段的值存在时，我才能调用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');
              }
            });
            });
        }
      })

Swal.fire({
标题：“是否确实要保存笔记？”，
键入：“info”，
showCancelButton:true，
confirmButtonColor:“#3085d6”，
cancelButtonColor:“#d33”，
confirmButtonText:“是”
})。然后（（结果）=>{
console.log（'result.value'，result.value）；
if（result.value）{
游泳池火灾（{
标题：“下载笔记”，
html:“ID
注释”，
confirmButtonText:“保存”，
预确认：（登录）=>{
console.log（'document.getElementById（swal-input2）.value'，document.getElementById（'swal-input2'）.value）；
请求\u字符串={
“请求”：
[
{
“Col1”：“value1”，
“Col1”：“value2”，
“Col1”：document.getElementById（'swal-input2'）。值，
“Col1”：document.getElementById（'swal-input1'）。值，
}
]
};
获取（'API_URL'{
标题：{
“Accept”：“application/json，text/plain，application/xml，*/*”，
“内容类型”：“应用程序/json”，
“访问控制允许标头”：“内容类型”，
},
方法：“POST”，
正文：JSON.stringify（请求字符串）
}
)。然后（响应=>{
如果（response.status！==200）{
返回；
}
response.text（）.then（数据=>{
响应数据=数据；
response_jsonObj=JSON.parse（response_数据）；
});
}).catch（error=>this.setState（{error}））；
},
allowOutsideClick:（）=>！Swal.isLoading（）
})。然后（（结果）=>{
游泳({
标题：“正在处理您的请求！”，
图标：“成功”，
confirmButtonText:“确定”
}).然后（（好）=>{
如果（好的）{
history.push（'/page1'）；
history.push（'/page2'）；
}
});
});
}
})

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

swal-input2

）不为空，则只需添加

预确认

，如下所示：

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

---

您可以找到工作解决方案

嗨，各位，这是修复后的代码示例：

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

Swal.fire({
标题：“是否确实要保存笔记？”，
键入：“info”，
showCancelButton:true，
confirmButtonColor:“#3085d6”，
cancelButtonColor:“#d33”，
confirmButtonText:“是”
})。然后（（结果）=>{
console.log（'result.value'，result.value）；
if（result.value）{
游泳池火灾（{
标题：“下载笔记”，
html:“ID
注释”，
confirmButtonText:“保存”，
预确认：（）=>{
if（（document.getElementById（'swal-input2'）。value==“”）| |（document.getElementById（'swal-input2'）。value==“”）| |（（document.getElementById（'swal-input2'）。value==null）））{
Swal.showValidationMessage(
`ID是必填字段`
)
}
}
})。然后（（结果）=>{
请求字符串={
“请求”：
[
{
“COL1”：值1，
“COL2”：值2，
“COL3”：值3，
“COL4”：VALUE4，
“COL5”：值5，
“COL6”：VALUE6，
“COL7”：值7
}
]
};
;
获取（'API_URL'{
标题：{
“Accept”：“application/json，text/plain，application/xml，*/*”，
“内容类型”：“应用程序/json”，
“访问控制允许标头”：“内容类型”，
},
方法：“POST”，
正文：JSON.stringify（请求字符串）
}
)。然后（响应=>{
如果（response.status！==200）{
返回；
}
response.text（）.then（数据=>{
响应数据=数据；
response_jsonObj=JSON.parse（response_数据）；
this.setState（{state:response_jsonObj}）；
});
}).catch（error=>this.setState（{error}））；
游泳({
标题：“请求已成功提交！”，
图标：“成功”，
confirmButtonText:“确定”
}).然后（（好）=>{
如果（好的）{
history.push（'/page1'）；
history.push（'/page2'）；
}
});
});

尝试模拟类似的东西：我刚刚修复了我的，谢谢，我已经发布了同样的代码示例。