如何检查表单的有效性？

Question

I'm new to web developing, I was trying to modify this code so it won't allow to click any of register or sign in buttons if the textareas above were empty, i'm confused where to write the if statement that will check that but i only know the basics of JS not and a little bit about jQuery,i tried to add the following我是 web 开发的新手，我正在尝试修改此代码，因此如果上面的文本区域为空，它将不允许单击任何注册或登录按钮，我很困惑在哪里编写将检查的 if 语句那但我只知道JS的基础知识而不知道一点关于jQuery，我尝试添加以下内容

reg-btn.click(function(e){
     if($('.pwd' ).val() == null){
     alert("error");}
     else{ .....remaining code..}

but it didn't work, Is there an way to fix that?但它没有工作，有没有办法解决这个问题？ the original code is from: https://codepen.io/chouaibblgn45/pen/ZXKdXR?editors=1010原代码来自： https://codepen.io/chouaibblgn45/pen/ZXKdXR?editors=1010

 "use strict"; $(document).ready(function () { /*------- button with class register -------*/ var reg_btn = $('.container.register'); reg_btn.click(function (e) { e.preventDefault(); $(this).siblings('.reg').css({ 'transform': 'translateY(40%) scale(5)', 'border-radius': '0', 'width': '100%', 'height': '100%' }).end(); reg_btn.siblings('.container h3:nth-of- type(1)').css({ 'top': '40%', 'z-index': '8', }).end().end(); }); });

 * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-family: 'Open Sans', sans-serif; background: #e2e2e2; } svg { position: fixed; top: 10px; left: 180px; }.container { position: relative; top: 200px; left: 35%; display: block; margin-bottom: 80px; width: 500px; height: 360px; background: #fff; border-radius: 5px; overflow: hidden; z-index: 1; } h2 { padding: 40px; font-weight: lighter; text-transform: uppercase; color: #414141; } input { display: block; height: 50px; width: 90%; margin: 0 auto; border: none; } input::placeholder { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-transition: .5s; transition: .5s; } input:hover, input:focus, input:active:focus { color: #ff5722; outline: none; border-bottom: 1px solid #ff5722; } input:hover::placeholder, input:focus::placeholder, input:active:focus::placeholder { color: #ff5722; position: relative; -webkit-transform: translateY(-20px); transform: translateY(-20px); }.email, .pwd { position: relative; z-index: 1; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-left: 20px; font-family: 'Open Sans', sans-serif; text-transform: uppercase; color: #858585; font-weight: lighter; -webkit-transition: .5s; transition: .5s; }.link { text-decoration: none; display: inline-block; margin: 27px 28%; text-transform: uppercase; color: #858585; font-weight: lighter; -webkit-transition: .5s; transition: .5s; } button { cursor: pointer; display: inline-block; float: left; width: 250px; height: 60px; margin-top: -10px; border: none; font-family: 'Open Sans', sans-serif; text-transform: uppercase; color: #fff; -webkit-transition: .5s; transition: .5s; } button:nth-of-type(1) { background: #673ab7; } button:nth-of-type(2) { background: #ff5722; } button span { position: absolute; display: block; margin: -10px 20%; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: .5s; transition: .5s; } button:hover span { -webkit-transform: translateX(30px); transform: translateX(30px); }.reg { position: absolute; top: 0; left: 0; -webkit-transform: translateY(-100%) scale(1); transform: translateY(-100%) scale(1); display: block; width: 20px; height: 20px; border-radius: 50px; background: #673ab7; z-index: 5; -webkit-transition: .8s ease-in-out; transition: .8s ease-in-out; } h3 { position: absolute; top: -100%; left: 20%; text-transform: uppercase; font-weight: bolder; color: rgba(255, 255, 255, 0.3); -webkit-transition: .3s ease-in-out 1.2s; transition: .3s ease-in-out 1.2s; }

 <?DOCTYPE html> <html> <head> <head> <body> <div class="container"> <h2>login</h2> <form> <input type="text" class="email" placeholder="email"> <br/> <input type="text" class="pwd" placeholder="password"> </form> <a href="#" class="link"> forgot your password ? </a> <br/> <button class="register"> <span>register</span> </button> <button class="signin"> <span>sign in</span> </button> <h3>your registration is complete ! </h3> <h3>your sign in is complete !</h3> <div class="reg"></div> <div class="sig"></div> </div> </body> </html>

Answer 1

Use an id rather than a class and then you want to check if the value is empty string使用 id 而不是 class 然后您要检查该值是否为空字符串

<input type="text" id="email" class="email" placeholder="email">
 <br/>
<input type="text" id="pwd" class="pwd" placeholder="password">

and in the JS并在 JS

reg-btn.click(function(e){
 if($('#pwd' ).val() === ''||$('#email').val()===''){
 alert("Please Fill Required Fields");}
 else{ .....remaining code..}

Answer 2

An empty input field's .val() will be a string with no characters in it.空输入字段的.val()将是一个没有字符的字符串。 Not a null value.不是null值。

You can see this if you run the following如果您运行以下命令，您可以看到这一点

console.log(typeof $('.pwd' ).val())
// returns string

You could change your code to:您可以将代码更改为：

reg-btn.click(function(e){
     if($('.pwd' ).val().length > 0){
        //form is valid
    }

如何检查表单的有效性？

问题描述

2 个解决方案

解决方案1
2 已采纳 2020-04-06 14:14:44

解决方案2
2 2020-04-06 14:19:14

如何检查表单的有效性？

问题描述

2 个解决方案

解决方案1 2 已采纳 2020-04-06 14:14:44

解决方案2 2 2020-04-06 14:19:14

解决方案1
2 已采纳 2020-04-06 14:14:44

解决方案2
2 2020-04-06 14:19:14