登錄頁面上的jQuery Mobile表單驗證

我一直在尋找一種方法來驗證登錄頁面上的表單。我在隨附的JSFiddle的stackoverflow中找到了一個很有前途的解決方案。登錄頁面上的jQuery Mobile表單驗證

我不喜歡究竟如何，他/她的風格，所以我只是把我認爲是非常重要的。

現在會發生什麼事是不是隻是去到下一個頁面（像以前那樣做）它只是...刷新頁面（至少這是看起來發生的）。

這是我的HTML和JS，我用

<form id="form1" name="ff1"> 

    <p class="numba1"><input type="email" name="email" id="email" 
style="border: 1px solid grey !important; background:#FFF8E6; box- 
shadow: none !important; border: none;" id="fremail" data-wrapper- 
class="ui-custom" placeholder="Email"></p> 

    <p class="numba2"><input type="password" name="password" 
id="password" style=" border: 1px solid grey !important; background- 
color:#FFF8E6; text-shadow: none; box-shadow: none !important; 
border: none;" value="" data-wrapper-class="ui-custom" 
placeholder="Password"></p> 


    <input type="submit" value="LOGIN" id="submit" /> 

    </form> 

$('#form1').validate({ 
rules: { 

    email: { 
     required: true 
    }, 
    password: { 
     required: true 
    } 
}, 
messages: { 

    email: { 
     required: "Please enter your last name." 
    }, 
    password: { 
     required: "Please enter your email." 
    } 
}, 
errorPlacement: function (error, element) { 
    error.appendTo(element.parent().prev()); 
}, 
submitHandler: function (form) { 
    $(':mobile-pagecontainer').pagecontainer('change', '#homePage', { 
     reload: false 
    }); 
    return false; 
} 
});

來源

2015-04-29 RubberDucky4444

如果您仍在尋找解決方案，您可能需要發佈更多的代碼？在我看來，這個頁面還有更多內容，而不僅僅是你發佈的HTML。另外，你還喜歡其他的StackOverflow和JSFiddle嗎？一兩個鏈接可能會有所幫助。 – Bill

我從我的學校的老師那裏得到了幫助，代碼比我想象的要簡單得多。儘管如此，感謝您持續的關注。 – RubberDucky4444

你將不得不處理POST請求，服務器端和服務於不同的頁面，或當你基於登錄成功或失敗做認證檢查重定向。

只要它顯示相同的頁面，如果您需要POST轉到不同的地方，您需要添加動作屬性並指定一個url。

<form action="/login" id="form1" name="ff1" method="post" onsubmit="return validateForm();">

來源

2015-04-29 19:43:33 krisfremen

謝謝你的回覆，但是沒有效果:( – RubberDucky4444

@MatthewSingleton你可以詳細說明「那是行不通的嗎？」 – krisfremen

頁面刷新或重新加載的效果仍然存在 – RubberDucky4444

登錄頁面上的jQuery Mobile表單驗證

回答

相關問題