Not able to pass with using input attribution

Question

The following codes are supposed to pass when you add message and submit. But I always get pop-up, "Please fill all fields!". What am I doing wrong here?

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;
});
});

CheckForm() function check only that input has attribute Value or not. You are not checking any validation — 111, Mar 28 '14 at 07:00

score 2 · Accepted Answer · answered Mar 28 '14 at 06:59

you need to read the value not the value attribute, when you enter data the attribute value is not updated instead value property is updated

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

Demo: Fiddle

Felix · Answer 2 · 2014-03-28T07:22:18.923

1

You need to check the value of your input, not attribute, you can use .val() to get the value of your input, so you can do:

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

or:

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

instead of:

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

Please note that you need to use $.trim() to remove all white space to prevent users from submitting form when they only key in the white space inside the input.

Updated Fiddle

edited Mar 28 '14 at 07:22

answered Mar 28 '14 at 06:59

Felix

37,892
8
43
55

If you are using `inputuser.val()!='' `, you'd be better of using `$.trim(inputuser.val())!='' ` instead – Vandesh Mar 28 '14 at 07:05

score 0 · Answer 3 · edited May 23 '17 at 10:31

Use inputMessage.val() instead of inputMessage.attr("value")
Check out .val() usage.

Reason : Check out the difference between attributes and properties here.
When you input some text in text area, the property is updated rather than the attribute.

JsFiddle link

Also, a better way to check would be :

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

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

Not able to pass with using input attribution

3 Answers3