javascript - 如果javascript中验证失败如何停止表单提交

Question

需要一些帮助...我研究了有关stakeoverflow的解决方案，但由于某种原因，我的带验证的HTML表单仍然提交，而它不应该提交。

  <form class="submitForm" action="https://www.google.com" method="POST" id="form" target="_blank" onsubmit="return validateForm()">
      <span id="validationMessage" aria-live="polite"></span>
      <input class="nameInput" type="text" name="name" value="" id="name" placeholder="Name">
      <input class="urlInput" type="url" name="url" value="" id="url" placeholder="https://example.com">
      <button type="submit">go!</button>
  </form>

我特意从输入字段中删除了必需，因为我想编写自己的验证。

但基本上，如果文本输入和url输入字段具有空值，则不应提交表单。

但是表单仍然提交!我做错了什么？

这是我检查 URL 是否有效的函数。或者如果它的值为空:

  function validateForm(data) {
    console.log('validate form');

    var url = data.url;
    var pattern = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;

    if (pattern.test(url)) {
        console.log("Url is valid");
        validationMessage.innerHTML = '';
        return true;
    } else if (url.length === 0 || url === '') {
        console.log("Url is not valid!");
        validationMessage.innerHTML = 'URL format is not correct. Please check your url';
        return false;
    }
  }

这是我的函数，用于检查文本值字段是否为空:

  function validateName(data) {
    // console.log('validate form');
    console.log('data.name', data.name.length);

    if (data.name.length > 1) {
      // validationMessage.innerHTML = 'Please input a bookmark name';
      console.log('there is a name!');
      return true;
    } else if (data.name === "" || data.name.length === 0) {
      // validationMessage.innerHTML = 'Please input a bookmark name';
      console.log('no name!');
      return false;
    }
  }

它们都控制台记录了正确的场景，但表单仍然提交...

更新:为了回答发帖人的问题，ValidateName() 在此处调用:

  // ADD A NEW BOOKMARK
  form.addEventListener('submit', function(e){
    e.preventDefault();

    let data = {
      name: nameInput.value,
      url: urlInput.value
    };

    validateName(data);
    // validateForm(data);


    $.ajax({
      url: urlInput.value,
      dataType: 'jsonp',
      statusCode: {
        200: function() {
          console.log( "status code 200 returned" );
          bookMarksArray.push(data);
          console.log("Added bookmark #" + data);
          localStorage.setItem("bookMarksArray", JSON.stringify(bookMarksArray));
          turnLoadingStateOn(bookMarksArray);
        },
        404: function() {
          console.log( "status code 404 returned. cannot add bookmark" );
        }
      }
   });
  });

Answer 1

实际上，如果您不想提交表单，则需要从提交处理程序返回 false

var namevalid = validateName(data);
!namevalid ? return false : null;