Question

添加邮件并提交时，以下代码应该通过。但我总是弹出“请填写所有字段！”。我在这里做错了什么？

HTML

<form method="post" id="form" action="admin/insertShoutBox" >
    <input type="hidden" name="user_id" id="user_id" value="1" />
    <input type="hidden" name="user" id="nick" value="admin" />
    <p class="messagelabel"><label class="messagelabel">Message</label>
        <textarea  id="message" name="message" rows="2" cols="80"></textarea>
    </p>
    <div class="buttons">
        <button type="submit" class="positive" name="submit" value="submit">
        <img src="http://localhost/kaimonokago3/assets/icons/disk.png" alt="disk"/>            Save            </button>
    </div>
</form>

的jQuery

$(document).ready(function(){
//global vars
var inputUser = $("#nick");
var inputMessage = $("#message");

//check if all fields are filled
function checkForm()
{
    if(inputUser.attr("value") && inputMessage.attr("value"))
    {
        return true;
    }   
    else
    {
        return false;
    }      
}


//on submit event
$("#form").submit(function(event){
    event.preventDefault();
    if(checkForm())
    {
        // doing something here
    }
    else alert("Please fill all fields!");
    //we prevent the refresh of the page after submitting the form
    return false;
});
});

Answer 1

你需要读取值而不是value属性，当你输入数据时，属性值没有更新而是value属性被更新

function checkForm()
{
    if(inputUser.val() && inputMessage.val())
    {
        return true;
    }   
    else
    {
        return false;
    }      
}

演示：Fiddle

Answer 2

您需要检查input的值，而不是属性，您可以使用 .val() 来获取input的值，这样您就可以做：

if($.trim(inputUser.val()) && $.trim(inputMessage.val())) {

或：

if($.trim(inputUser.val()) != ''  && $.trim(inputMessage.val()) != '') {

而不是：

if(inputUser.attr("value") && inputMessage.attr("value")) {

请注意，您需要使用 $.trim() 删除所有空白区域，以防止用户在仅键入输入内的空白区域时提交表单。

<强> Updated Fiddle

Answer 3

使用inputMessage.val()代替inputMessage.attr("value")
查看.val()用法。

原因：查看属性和属性here之间的差异在文本区域中输入一些文本时，属性会更新，而不是属性。

JsFiddle link

另外，更好的检查方法是：

function checkForm()
{
    return CheckStringInput(inputUser.val()) && CheckStringInput(inputMessage.val());      
}

function CheckStringInput(stringInput){
   if(typeof stringInput!="undefined" && stringInput!=null && $.trim(stringInput)!='')
      return true;
   return false;
}

无法使用输入归属传递

3 个答案: