transition-如下一段簡單的代碼，有兩個疑惑請求解答一下

如下一段簡單的代碼，有兩個疑惑請求解答一下

HTML代碼：

 <form method="post" action="#" name="form">
     <label for="user_ball">運動類型</label>
     <input type="text" name="user_ball" id="user_ball" list="ball" />
     <datalist id="ball">
        <option value="籃球" />
        <option value="排球" />
        <option value="足球" />
     </datalist>
     <br /><br />
     <input type="submit" />
 </form>

CSS代碼：

input{
    width:300px;
    min-height:30px;
    display:block;
    transition:all 0.5s ease-in-out;
} 

form input:valid{
    background:url("tick.gif") no-repeat 260px 0;
}

form input:focus:invaild{
    backgruond:url("cancel.gif") no-repeat 260px 0;
}

這是tick.gif圖片：
這是cancel.gif圖片：
JS代碼：

var user_ball;
function load(){
    user_ball = document.form.user_ball;
    user_ball.addEventListener('change', checkUserBall, false);
}

function checkUserBall(){
    if(isUserBall(user_ball.value) == null){
        user_ball.setCustomValidity("請選擇正確的選項");
        user_ball.validationMessage;
    }else{
        user_ball.setCustomValidity("");
    }
}

function isUserBall(str){
    if(str != '籃球' && str != '排球' && str != '足球'){
        return null;
    }
}

window.addEventListener('load', load, false);

疑惑：
1、每次運行，無論寫入的是不是預定的籃球、足球、排球，都會報錯，這是問什麼？
2、設置了動畫後，每次點擊了輸入框，裡面的圖片為何總是從左飛到右邊？我不是已經設置了圖片的位置為右邊的嗎？這個位置不是固定的嗎？我又沒使用animation屬性

最佳回答：

    function isUserBall(str) {
        if (str != '籃球' && str != '排球' && str != '足球') {
            return null;
        }
        return true;//////不走上面的判斷你要return true，要不返回值是undefined和null對比是true
    }

你設置了transition，由於默認背景的只是0 0，valid後變為260px 0，所以當然會有動畫效果，如果不需要動畫，設置好默認的背景圖片位置

 input{
    width:300px;
    min-height:30px;
    display:block;
    transition:all 0.5s ease-in-out;
    background-position:260px 0;
}