Dừng gửi với giá trị đầu vào trống

Question

Im Tìm kiếm giải pháp đơn giản để ngăn biểu mẫu đăng nhập gửi với trường nhập trống. Mã cho biểu mẫu dưới đây. Tôi muốn sử dụng một soluiton Javascript đơn giản nếu có thể.

<form id="login" method="post" action=""> 
    <input type="text" name="email" id="email" /> 
    <input type="password" name="pwd" id="pwd" /> 
    <button type="submit" id="submit">Login</button> 
</form>  

Nếu có thể, tôi cũng muốn thay đổi đường viền của (các) trường trống.

Xin cảm ơn trước.

Answer 1

Mẫu mã với kiểm tra giả:

<script type="text/javascript"> 
function checkForm(form) { 
    var mailCheck = checkMail(form.elements['email']), 
     pwdCheck = checkPwd(form.elements['pwd']); 
    return mailCheck && pwdCheck; 
} 

function checkMail(input) { 
    var check = input.value.indexOf('@') >= 0; 
    input.style.borderColor = check ? 'black' : 'red'; 
    return check; 
} 

function checkPwd(input) { 
    var check = input.value.length >= 5; 
    input.style.borderColor = check ? 'black' : 'red'; 
    return check; 
} 
</script> 

<style type="text/css"> 
#login input { 
    border: 2px solid black; 
} 
</style> 

<form id="login" method="post" action="" onsubmit="return checkForm(this)"> 
    <input type="text" name="email" id="email" onkeyup="checkMail(this)"/> 
    <input type="password" name="pwd" id="pwd" onkeyup="checkPwd(this)"/> 
    <button type="submit" id="submit">Login</button> 
</form> 

Answer 2

cách tiếp cận có thể xảy ra:

• thiết lập hành động để #
• thêm xử lý để nút gửi hoặc onsubmit dạng
• thay đổi hoạt động của các hình thức, nếu lĩnh vực văn bản không có sản phẩm nào

Chỉnh sửa: Để thực hiện việc này ngay cả khi người dùng không sử dụng javascript chèn # -action khi trang được tải.

Answer 3

Để giữ cho nó tối thiểu tôi sẽ chỉ cần sử dụng:

<form id="login" method="post" action="" onSubmit="if (this.email.value == '' || this.pwd.value == '') {return false;}"> 

Cấp - không chỉ ra những gì không ổn cho người dùng, nhưng một công trình xử .