我的JavaScript验证表单无法识别已填写的输入

Question

我正在尝试编写需要名称，2个匹配密码和电子邮件的验证或注册表格。 截至目前，如果“名称输入”（我使用div设置样式）为空，则我会挂起弹出的警报。 我们应该主要使用If / Else函数。

这是我到目前为止所拥有的。

<body>
<div id='register'><p>Register Here:</p></div>
<div id='background'>   
<input type="text" placeholder="Name" id="A" ></input> 
<input type="password" placeholder="Password" id="B"></input>  
<input type="password" placeholder="Confirm Password" id="C"></input>
<input type="email" placeholder="Email" id="D"></input>
</div>
<input type="Submit" id="button"></input>

和

$(document).ready(function(){

var Name = $('A').val();
var Pass = $('B').val();
var Confirm_Pass = $('C').val();
var Email = $('D').val();

$('#button').click(function(){    
if(!Name){
  alert("Fill in all boxes");
}
else{
  alert('valid');
}  

});
});

截至目前为止，即使输入内容已填满，我也将收到“在所有方框中填充”警报。

Answer 1

$('A')

将搜寻

<A></A>

你在找

$("#A")

Answer 2

这是一个工作示例： http : //jsfiddle.net/p6hYa/

在下面的评论中，这里很少提到问题：

$(document).ready(function(){
    //Selecting by ID is in the form $("#ID")
    var Name = $('#A'); //You want to get the values AFTER submit is clicked, otherwise this will always be the initial empty value.
    var Pass = $('#B');
    var Confirm_Pass = $('#C');
    var Email = $('#D');

    $('#button').click(function(){    

        if(!Name.val()){ //Inside the click event you grab the value
          alert("Fill in all boxes");
        }
        else{
          alert('valid');
        }  
    });

});