在API Fetch ES6中注册函数

Question

我有一个带有注册功能的弹出模式。问题是它在我点击注册按钮后关闭弹出窗口，尽管字段尚未完全填写或有错误。我已经把'＃34; required＆＃34;在input元素中，它什么都不做。我的代码中有什么问题。我试图从网站上获取api注册表。

＆＃13;

＆＃13;

function registerUser(event){

    console.log(event)

    event.preventDefault();

 console.log(document.forms[0].checkValidity());
    fetch('http://sample_website.com/api/register', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            given_name: document.getElementById("given_name").value,
            last_name: document.getElementById("last_name").value,
            email: document.getElementById("email").value,
            password: document.getElementById("password").value,
            password_confirmation: document.getElementById("confirm_password").value
        })
    })
    .then(data => data.json())
    .then(data =>  { 
        console.log(data);
        if(data.response){
            alert("Successfully Registered"); 
        } else{
            alert("Sorry, email has already been taken.");
        } 
    })
    .catch((err) => {
         alert ("This is a warning message!");
        console.error(err);
    })

   
}

 window.onload = function() {
  document.forms[0]
  .addEventListener("submit", registerUser)
}

＆＃13;

<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form>
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title text-info" id="myModalLabel">Register Now</h4>
                </div>
                <div class="modal-body">    
                    <div class = "form-group">
                        <label>Given Name</label>
                        <input type="text" id="given_name" name="given_name" class = "form-control" required/>
                    </div>
                    <div class = "form-group">
                        <label>Last Name</label>
                        <input type="text" id="last_name" name="lname" class = "form-control" required/>
                    </div>
                    <div class = "form-group">
                        <label>Email</label>
                        <input type="text" id="email" name="email" class = "form-control" required/>
                    </div>
                    <div class = "form-group">
                        <label>Password</label>
                        <input type="password" id="password" name="password" class = "form-control" required/>
                    </div>
                    <div class = "form-group">
                        <label>Confirm Password</label> 
                        <input type="password" id="confirm_password" name="c_password" class = "form-control" required/>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" ata-dismiss = "modal" ><i class="fa fa-user-plus" aria-hidden="true"></i> Register</button>
                </div>
            </form>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

fetch()和JavaScript一般与问题中描述的问题无关。

问题是，在问题的HTML中，<form>是有效的。

因此<form>在click <button>元素处提交。

您已将value属性设置为非空的有效字符串。 pattern个元素没有<input>个属性可将RegExp有效性模式设置为现有.value属性以外的值。

将placeholder替换为value属性或包含pattern属性，以反映默认value无效。

＆＃13;

＆＃13;

<script>
function registerUser() {
  console.log(document.forms[0].checkValidity())
}
</script>

<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form>
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title text-info" id="myModalLabel">Register Now</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>Given Name</label>
            <input type="text" id="given_name" name="given_name" placeholder="Joseph" class="form-control" required/>
          </div>
          <div class="form-group">
            <label>Last Name</label>
            <input type="text" id="last_name" name="lname" placeholder="Book" class="form-control" required/>
          </div>
          <div class="form-group">
            <label>Email</label>
            <input type="text" id="email" name="email" placeholder="123@gmail.com" class="form-control" required/>
          </div>
          <div class="form-group">
            <label>Password</label>
            <input type="password" id="password" name="password" placeholder="123" class="form-control"  required/>
          </div>
          <div class="form-group">
            <label>Confirm Password</label>
            <input type="password" id="confirm_password" name="c_password" placeholder="123" class="form-control" required/>
          </div>
        </div>
        <div class="modal-footer">
          <button onclick="registerUser();" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-user-plus" aria-hidden="true"></i> Register</button>
        </div>
      </form>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;