html - Why bootstrap form validation doesn't work on one webpage? -
i have 3 web pages each page contains 1 bootstrap form. forms structured same, each has different number of input fields , order in appear in form.
the html page files, local js files in same folder(no sub-folders). <head> on each page has same assests. non-functional form has text area , button other forms not. have tried commenting these out, didn't resolve problem. have tried removing link local css, made no difference in issue.
when check html files w3 validator 1 error , 2 warnings. error: element legend not allowed child of element form in context. warning: date input type not supported in browsers. please sure test, , consider using polyfill. commenting out legend makes no difference. have date field in both working , non-working forms. when @ dev tools in chrome don't see errors.
i have tested on both chrome , firefox, don't think browser specific issue. note done on local machine , coded using notepadd++. know tremendous amount of code post review, if required so. hoping have troubleshooting suggestion.
have created 2 jsbin. first link page non working form. second link page working form. first link https://jsbin.com/xuwuziy/edit?html,css,js,output . second link https://jsbin.com/luqatel/edit?html,css,js,output
in first jsbin: $('#cruise1').bootstrapvalidator(.... there's no element id "cruise1" in page. instead form's id "quoteform". therefore validator not bind because can't find element "cruise1" id.
since you're including same validation js on both pages, in order same code validate both forms, have use selector can match both forms.
there 2 possible, simple solutions.
1) give both forms id of "cruise1". however, may not descriptive of quote form.
2) give both forms same class, , use that selector initialise validator. e.g.:
the form tags:
<form class="form-horizontal validatableform" id="quoteform"> and
<form class="form-horizontal validatableform" id="cruise1"> and validator intialisation:
$('.validatableform').bootstrapvalidator( //...etc this initialise same validation on forms match given selector (i.e. forms class). in 1 page, in situation, might have 1 form loaded class, means work when code included in both pages, , if reason had 2 forms class loaded in 1 page bind well.
one last note, since mentioned new this: hope implementing same validation rules in server side code (the code deals submitted form data). client-side validation such you've used nice user experience, it's not secure - user, malicious one, or automated spam-bot, can manipulate or bypass javascript validation (most simply, turning off javascript) , try send invalid or problematic data server. cannot trust comes client-side , must re-validate in order protect application , database.
Comments
Post a Comment