1
fromフィールドを検証しているフォームを作成しました。それはうまくいきますが、エラーがあれば私がフォームをcurating（submit）しています。そのフォームで私はその場所を指摘しています...特定のエラーの場所を指摘するために。あなたが私を案内してください。私のために、そのフォームで約30のフィールドがあり、最後にキュレーションされたボタンです。エラーがトップになったら、エラーを示す場所を表示したい。jqueryを使用してフォームを送信する際に特定のエラー位置を指し示す
function curate(saveOnly) {
\t \t
\t \t if(isValidForm()){
\t \t \t var newFormData = JSON.stringify($("#form").serializeArray());
\t \t \t
\t \t \t \t if(saveOnly){
\t \t \t \t \t saveForm(true);
\t \t \t \t }else{
\t \t \t \t \t adpart.content.isCurated = true;
\t \t \t \t \t adpart.content.stateVal = $("#curfut").val();
\t \t \t \t \t autoSaveDiagram();
\t \t \t \t \t saveForm();
\t \t \t \t }
\t \t \t \t \t
\t \t \t \t $(".reveal-overlay").css("display", "none");
\t \t \t \t confirmExit();
\t \t }else{
\t \t \t if(saveOnly){
\t \t \t \t toastr.warning('Please fill the mandatory fields to curate', 'Curation Failed!');
\t \t \t }
\t \t }
\t }
function isValidForm() {
\t \t var isValid = checkIfValidText("type") &
\t \t \t \t \t checkIfValidText("accountname") &
\t \t \t \t \t checkIfValidText("serviceline") &
\t \t \t \t \t checkIfValidText("vsmphase")&
\t \t \t \t \t checkIfValidText("georegion")&
\t \t \t \t \t checkIfValidText("curfut");
}
return isValid;
}
function checkIfValidTextField(fieldId){
\t \t var isValid = true; \t \t
\t \t if($(fieldId).val().length==0){
\t \t \t $(fieldId).css('boxShadow',"rgb(255, 0, 0) 0px 0px 10px");
\t \t \t isValid = false;
\t \t }else{
\t \t \t $(fieldId).css('boxShadow',"none");
\t \t }
\t \t return isValid;
\t }<form action="editor/checklist" method="GET" model="curatorCheckList"
\t \t enctype="text/plain" id="form" name="curatorCheckListForm">
<table style="border-collapse: collapse; padding: 20px;" class="curator_id">
\t \t \t \t <tr>
\t \t \t \t \t <td>
\t \t \t \t \t <div>
\t \t \t \t \t
\t \t \t \t \t \t \t Vertical Name
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <select name="verticalName" class="Curator-verticalname" id="type" onchange="populateSvcLineAndActName()">
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <option value="">Select</option>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <option value="Healthcare">Healthcare</option>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <option value="BFS">BFS</option>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <option value="Technology">Technology</option>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <option value="Insurance">Insurance</option>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <option value="Life Sciences">Life Sciences</option>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <option value="IME">IME</option>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <option value="P & R">P&R</option>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <option value="Banking & Lending">Banking and Lending</option>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t <option value="F&A">F&A</option>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t </select>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <span id="acnterrname" style="margin-top: 29px; margin-left: 275px; color: red;"></span>
\t \t \t \t \t \t \t
\t \t \t \t \t \t </div>
\t \t \t \t </td>
\t \t \t \t
\t \t \t \t <td>Account Name
\t \t \t \t <select id="accountname" name= "accountName" style=" margin-left: 23px; width: 270px;height: 27px;">
\t \t \t \t
\t \t \t \t <option value= "" selected="selected"></option>
\t \t \t \t
\t \t \t \t </select>
\t \t \t \t \t <span id="acnterrname" style="margin-top: 29px; margin-left: 275px; color: red;"></span>
\t \t \t \t </td>
\t \t </tr>
\t \t <tr>
\t \t \t \t <td>Service Line
\t \t \t \t
\t \t \t \t <select id="serviceline" name="serviceLine" id="serviceline" class="Curator-serviceline" onchange="populateSubserviceLine()" required >
\t \t \t \t
\t \t \t \t \t \t \t <option value="" selected="selected"></option>
\t \t \t \t \t \t \t
\t \t \t \t \t </select>
\t \t \t \t \t <span id="acnterrname" style="margin-top: 29px; margin-left: 275px; color: red;"></span>
\t \t \t \t \t
\t \t \t \t </td>
\t \t \t \t <td style="vertical-align: sub; padding-top: 12px;">VSM Phase
\t \t \t \t
\t \t \t \t <select name="vsmPhase" class="curator-vsmphase" id="vsmphase">
\t \t \t \t
\t \t \t \t \t \t \t <option value="1">1</option>
\t \t \t \t \t \t \t <option value="2">2</option>
\t \t \t \t \t \t \t <option value="3">3</option>
\t \t \t \t \t \t \t <option value="4">4</option>
\t \t \t \t \t \t \t <option value="5">5</option>
\t \t \t \t \t \t \t
\t \t \t \t </select>
\t \t \t \t <span id="acnterrname" style="margin-top: 29px; /* margin-left: 275px; */ color: red;"></span>
VSM Date
<input type="date"
\t \t \t \t \t \t name="completionDate" id="date" value="" class="curator-date" onkeydown="return false;"> <span id="acnterrname"
\t \t \t \t \t \t style="color: red; margin-top: 29px;"></span>
\t \t \t </td>
\t \t </tr>
\t \t <tr id="subserviceline">
\t \t \t \t \t <td>
\t \t \t \t \t Which Sub service Line does this VSM belong to ?
\t \t \t \t \t </td>
\t \t \t \t \t <td>
\t \t \t \t \t \t <select id="subservice" name="subservice" multiple="multiple" style="width: 300px;">
\t \t \t \t \t \t \t <!-- <option value="">select</option> -->
\t \t \t \t \t </select>
\t \t \t \t \t <span id="acnterrname" style="color: red; margin-top: 29px;"></span>
\t \t \t \t \t </td>
\t \t \t </tr>
\t \t <tr>
\t \t \t \t <td>
\t \t \t \t Which Geo/Region does this VSM belongs to?
\t \t \t \t </td>
\t \t \t \t
\t \t \t \t <td>
\t \t \t \t <select name="geo" id="georegion" class="curator_selectbox">
\t \t \t \t
\t \t \t \t \t \t \t <option value="" selected="selected">Select</option>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <option value="Global/Multi-Region">Global/multi-Region</option>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <option value="North America">North America</option>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <option value="Latin America">Latin America</option>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <option value="Europe">Europe</option>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <option value="Middle East & Africa">Middle East & Africa</option>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <option value="Asia">Asia</option>
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t <option value="Australia & New Zealand">Australia & New Zealand</option>
\t \t \t \t \t \t \t
\t \t \t \t \t </select>
\t \t \t \t \t <span id="adpartfiles" style="margin-top: 29px; margin-left: 275px; color: red;"></span>
\t \t \t </td>
\t \t </tr>
\t \t <tr>
\t \t \t \t <td>
\t \t \t \t IS this VSM the current State or future state VSM?
\t \t \t \t </td>
\t \t \t \t
\t \t \t \t <td>
\t \t \t \t <select name="curfut" id="curfut" class="curator_selectbox">
\t \t \t \t
\t \t \t \t \t \t \t <option value="">Select</option>
\t \t \t \t \t \t \t <option value="Current">Current</option>
\t \t \t \t \t \t \t <option value="Future"">Future</option>
\t \t \t \t \t \t \t
\t \t \t \t \t </select>
\t \t \t \t \t <span id="adpartfiles" style="margin-top: 29px; margin-left: 275px; color: red;"></span>
\t \t \t </td>
\t \t </tr>
\t \t \t \t
\t \t <tr>
\t \t \t <td style="padding-top: 10px !important; vertical-align: sub;">
\t \t \t
\t \t \t \t \t <div id="curator"></div>
\t \t \t \t \t VSM Name(Vertical,Service Line, Sub service Line, Name)
\t \t \t \t \t
\t \t \t </td>
\t \t \t
\t \t \t <td>
\t \t \t
\t \t \t <input type="text" name="vsmName" id="vsmName" class="curator-textbox" value="" readonly /><br>
\t \t \t
\t \t \t <textarea name="append" id="append" readonly
\t \t \t \t \t \t \t style="border: 1px solid #5db961; margin-top: 15px; background-color: #d0f7d2; resize: none; width: 379px; height: 35px; maxlength="100">
\t \t \t \t \t \t \t
\t \t \t \t </textarea>
\t \t \t \t \t
\t \t \t \t \t <span id="acnterrname" style="margin-top: 29px; margin-left: 275px; color: red;"></span>
\t \t \t </td>
\t </tr>
</table>
<input
\t \t \t \t \t \t style="margin-left: 135px; width: 100px; height: 36px; cursor: pointer;"
\t \t \t \t \t \t \t type="button" class="button margin-zero create-new-dialog-btn"
\t \t \t \t \t \t \t value="Curate" id="curateId" onClick="curate(false)">
</form>
次のエラーメッセージを表示することもできますし、そのフィールドをフォーカスするフォーカス方式を使用することができます。 –
私はそのフィールドの位置にフォーカスしたいと思います。エラーがあれば、その位置にスクロールします –
フィールド上で '.focus（）'を呼び出します。 – nnnnnn