使用CSS加载图标始终可见

时间:2016-12-19 19:50:46

标签: javascript html css

始终显示加载图标。我需要它来检查第一个JavaScript代码,如果这是真的显示加载图标。我的代码出了什么问题?在“onsubmit”部分,我是否只是将2个JavaScript放在彼此之后做错了?

    function checkForm(form)
    {
     if(form.username.value == "") {
       alert("Error: gelieve je naam in te vullen!");
       form.username.focus();
      return false;
    }
    re = /^\w+$/;
    if(!re.test(form.username.value)) {
      alert("Error: je naam mag alleen letters,nummers, en underscores   bevatten!");
      form.username.focus();
      return false;
    }

    if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value) {
      if(form.pwd1.value.length < 8) {
        alert("Error: je wachtwoord moet minstens 8 tekens hebben!");
        form.pwd1.focus();
        return false;
      }
      if(form.pwd1.value == form.username.value) {
        alert("Error: je wachtwoord mag niet hetzelfde zijn als je naam!");
        form.pwd1.focus();
        return false;
      }
      re = /[0-9]/;
      if(!re.test(form.pwd1.value)) {
        alert("Error: je wachtwoord moet minstens 1 cijfer bevatten (0-9)!");
        form.pwd1.focus();
        return false;
      }
      re = /[a-z]/;
      if(!re.test(form.pwd1.value)) {
        alert("Error: je wachtwoord moet minstens 1 kleine letter bevatten (a-z)!");
        form.pwd1.focus();
        return false;
      }
      re = /[A-Z]/;
      if(!re.test(form.pwd1.value)) {
        alert("Error: je wachtwoord moet minstens 1 grote letter bevatten (A-Z)!");
        form.pwd1.focus();
        return false;
      }
    } else {
      alert("Error: je ingevulde wachtwoorden zijn niet hetzelfde!");
      form.pwd1.focus();
      return false;
    }

    ;
    return true;
    }
    function showHide() {
    var div = document.getElementById("hidden_div");
    if (div.style.display == 'none') {
    div.style.display = '';
    }
    else {
    div.style.display = 'none';
    return false;
    }
    }
    <form name="form" method="POST" action="\JocanasNL.php" onsubmit="return checkForm(this); showHide(); return true;">    
     Voornaam.Achternaam:*<br><input type="text" name="username" size="19" required><br>
    <p>Dit zal ook jouw inlognaam worden!</p><br>
    Geslacht:<br><input type="radio" name="sex" value="Man">Man<br>
    <input type="radio" name="sex" value="Vrouw">Vrouw<br><br>
    Emailadres:*<br><input type="email" name="email" size="19" required><br><br>
    Wachtwoord:*<br><input rows="9" type="password" name="pwd1" size="19" required><br><br>
    Wachtwoord bevestigen:*<br><input rows="9" type="password" name="pwd2" size="19" required><br><br>
    Ideeën voor nieuwe films, TV-series games of functies:<br><textarea class="input" name="comment" rows="5" cols="30"></textarea><br><br>
    <input type="submit" value="Aanvragen" name="submit">
    <input type="reset" value="Herstellen">
    </form>
    <div class="spinner">
    <div class="bounce1"></div>
    <div class="bounce2"></div>
    <div class="bounce3"></div>
    </div>

1 个答案:

答案 0 :(得分:0)

此代码

return checkForm(this); showHide(); return true;

不正确。由于您return checkForm(this)showHide永远不会被执行。由于showHide显示它是隐藏的并隐藏它,如果它被显示并且你总是看到它,我想尽管内联CSS明确指定它不会被显示,但不知何故你的hidden_div被显示,通过checkForm或通过其他方式。您需要通过开发工具检查生成的HTML以确认或拒绝此声明。

上面的代码应更改为

if (checkForm(this)) {showHide(); return true;} return false;

因此如果checkFormtrue,则会调用showHide并返回true,这意味着将发布form。否则会返回false,阻止发布form