pointing the particular error location in form upon submitting a form using jquery

Question

I created a form in that i am validating the from fields.every thing is working fine but, when I am curating(submitting) the form if any error is there in that form i have point out that place..how to to point out the particular error place.can you please guide me..for me in that form nearly 30 fields is there and the curated button is at last. when the error is top i want to show the error pointing place.

 function curate(saveOnly) { if(isValidForm()){ var newFormData = JSON.stringify($("#form").serializeArray()); if(saveOnly){ saveForm(true); }else{ adpart.content.isCurated = true; adpart.content.stateVal = $("#curfut").val(); autoSaveDiagram(); saveForm(); } $(".reveal-overlay").css("display", "none"); confirmExit(); }else{ if(saveOnly){ toastr.warning('Please fill the mandatory fields to curate', 'Curation Failed!'); } } } function isValidForm() { var isValid = checkIfValidText("type") & checkIfValidText("accountname") & checkIfValidText("serviceline") & checkIfValidText("vsmphase")& checkIfValidText("georegion")& checkIfValidText("curfut"); } return isValid; } function checkIfValidTextField(fieldId){ var isValid = true; if($(fieldId).val().length==0){ $(fieldId).css('boxShadow',"rgb(255, 0, 0) 0px 0px 10px"); isValid = false; }else{ $(fieldId).css('boxShadow',"none"); } return isValid; } 

 <form action="editor/checklist" method="GET" model="curatorCheckList" enctype="text/plain" id="form" name="curatorCheckListForm"> <table style="border-collapse: collapse; padding: 20px;" class="curator_id"> <tr> <td> <div> Vertical Name <select name="verticalName" class="Curator-verticalname" id="type" onchange="populateSvcLineAndActName()"> <option value="">Select</option> <option value="Healthcare">Healthcare</option> <option value="BFS">BFS</option> <option value="Technology">Technology</option> <option value="Insurance">Insurance</option> <option value="Life Sciences">Life Sciences</option> <option value="IME">IME</option> <option value="P & R">P&R</option> <option value="Banking & Lending">Banking and Lending</option> <option value="F&A">F&A</option> </select> <span id="acnterrname" style="margin-top: 29px; margin-left: 275px; color: red;"></span> </div> </td> <td>Account Name <select id="accountname" name= "accountName" style=" margin-left: 23px; width: 270px;height: 27px;"> <option value= "" selected="selected"></option> </select> <span id="acnterrname" style="margin-top: 29px; margin-left: 275px; color: red;"></span> </td> </tr> <tr> <td>Service Line <select id="serviceline" name="serviceLine" id="serviceline" class="Curator-serviceline" onchange="populateSubserviceLine()" required > <option value="" selected="selected"></option> </select> <span id="acnterrname" style="margin-top: 29px; margin-left: 275px; color: red;"></span> </td> <td style="vertical-align: sub; padding-top: 12px;">VSM Phase <select name="vsmPhase" class="curator-vsmphase" id="vsmphase"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <span id="acnterrname" style="margin-top: 29px; /* margin-left: 275px; */ color: red;"></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; VSM Date <input type="date" name="completionDate" id="date" value="" class="curator-date" onkeydown="return false;"> <span id="acnterrname" style="color: red; margin-top: 29px;"></span> </td> </tr> <tr id="subserviceline"> <td> Which Sub service Line does this VSM belong to ? </td> <td> <select id="subservice" name="subservice" multiple="multiple" style="width: 300px;"> <!-- <option value="">select</option> --> </select> <span id="acnterrname" style="color: red; margin-top: 29px;"></span> </td> </tr> <tr> <td> Which Geo/Region does this VSM belongs to? </td> <td> <select name="geo" id="georegion" class="curator_selectbox"> <option value="" selected="selected">Select</option> <option value="Global/Multi-Region">Global/multi-Region</option> <option value="North America">North America</option> <option value="Latin America">Latin America</option> <option value="Europe">Europe</option> <option value="Middle East & Africa">Middle East & Africa</option> <option value="Asia">Asia</option> <option value="Australia & New Zealand">Australia & New Zealand</option> </select> <span id="adpartfiles" style="margin-top: 29px; margin-left: 275px; color: red;"></span> </td> </tr> <tr> <td> IS this VSM the current State or future state VSM? </td> <td> <select name="curfut" id="curfut" class="curator_selectbox"> <option value="">Select</option> <option value="Current">Current</option> <option value="Future"">Future</option> </select> <span id="adpartfiles" style="margin-top: 29px; margin-left: 275px; color: red;"></span> </td> </tr> <tr> <td style="padding-top: 10px !important; vertical-align: sub;"> <div id="curator"></div> VSM Name(Vertical,Service Line, Sub service Line, Name) </td> <td> <input type="text" name="vsmName" id="vsmName" class="curator-textbox" value="" readonly /><br> <textarea name="append" id="append" readonly style="border: 1px solid #5db961; margin-top: 15px; background-color: #d0f7d2; resize: none; width: 379px; height: 35px; maxlength="100"> </textarea> <span id="acnterrname" style="margin-top: 29px; margin-left: 275px; color: red;"></span> </td> </tr> </table> <input style="margin-left: 135px; width: 100px; height: 36px; cursor: pointer;" type="button" class="button margin-zero create-new-dialog-btn" value="Curate" id="curateId" onClick="curate(false)"> </form> 

Answer 1

You have several erros in your code.

Firstly, checkIfValidText function is not defined. It is defined as checkIfValidTextFiedld .

Secondly, you are using $(fieldId).val() this will translate to an error as id is referenced with a # . Use $('#'+fieldId).val() .

I have used .on() click function in my fiddle code because the curate() function was not able to load before the DOM and it was not able to find the curate() function. Use the on() click listener if you face similar issue.

Hope it helps.

JS fiddle for working code