いくつかの要素 (input、textarea、controlgroup) と、フォーム要素の外側に送信ボタンがあります...
これらの要素を検証できますか (クライアント側)? たとえば、それらが必須かどうかを確認し、空の場合はエラー メッセージを表示します。jquery 検証プラグインを使用してそれを行うことはできますか? どのように?
これまでの私のコードのサンプルは次のとおりです。
<div id="formContainer">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>User:</legend>
<div id="usersContainer">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="1" />
<label for="radio-choice-1">User1</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="2" />
<label for="radio-choice-2">User2</label>
</div>
</fieldset>
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="subjectMessage">Subject:</label>
<input type="text" name="subjectMessage" id="subjectMessage" value="" placeholder="Subject" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="bodyMessage">Body:</label>
<textarea name="bodyMessage" id="bodyMessage" placeholder="Body" rows="8"></textarea>
</div>
<input id="sendMessageBtn" type="submit" value="Send" />
</div>
<script type="text/javascript">
$(document).one("pageinit", function () {
$("#sendMessageBtn").on("click", function () {
var userId= $('#formContainer').find("#usersContainer :radio:checked").val();
var subject = $('#formContainer').find("#subjectMessage").val();
var body = $('#formContainer').find("#bodyMessage").val();
//send data to the server...
});
});
</script>