javascript - Bootstrap Modals, combine Jquery and JS code in form validation -

javascript - Bootstrap Modals, combine Jquery and JS code in form validation -

i have 3 questions concerning jquery syntax:

1) modal not showing up. may operator (&&) problem? how right? should show if thing valid.

2) how combine submit prevent default valid classes? have used before never combined jquery. want modal show when is_email valid , when inputemail, inputmessage , inputname fields filled out.

$('#submit').click(function(submit){ if($('#inputemail'&&'#inputmessage'&&'#inputname').val().length === 0)&& (is_email=="valid") { $('#mymodal').modal('show'); submit.preventdefault(); } );

4) if set col-lg6, alter size, documentation says have add together this:

$('.message-group').attr({ class: 'has-success'

works if add together col-lg6 form-group name-group alter size. why this?

my syntax is:

/*jquery form effects*/ /*$('#inputname').on('input', function() { var input=$(this); var is_name=input.val(); if(is_name){input.removeclass("invalid").addclass("valid");} else{input.removeclass("valid").addclass("invalid");} }); can comment out? */ $('#inputemail').on('input', function() { var input=$(this); var re = /^[a-za-z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-za-z0-9-]+(?:\.[a-za-z0-9-]+)*$/; var is_email=re.test(input.val()); if(is_email){ input.removeclass("invalid").addclass("valid"); } else{ input.removeclass("valid").addclass("invalid"); } }); /* display please come in name. */ $('#inputname').focusout(function(){ if($('#inputname').val().length === 0) { $('.name-group .message-block').text('please come in name.'); $('.name-group').attr({ class: 'has-error' }); // end attr } else { $('.name-group .message-block').text(''); $('.name-group').attr({ class: 'has-success' }); //end attr } }); //end focus out $('#inputmessage').focusout(function(){ if($('#inputmessage').val().length === 0) { $('.message-group .message-block').text('please come in message.'); $('.message-group').attr({ class: 'has-error' }); // end attr } else { $('.message-group .message-block').text(''); $('.message-group').attr({ class: 'has-success' }); //end attr } }); //end focus out $('#inputemail').focusout(function(){ if($('#inputemail').val().length === 0) { $('.mail-group .email-block').text('please come in email.'); $('.mail-group').attr({ class: 'has-error' }); // end attr } else { $('.mail-group .email-block').text(''); $('.mail-group').attr({ class: 'has-success' }); //end attr } }); //end focus out $('#submit').click(function(submit){ if($('#inputemail'&&'#inputmessage'&&'#inputname').val().length === 0)&& (is_email=="valid") { $('#mymodal').modal('show'); submit.preventdefault(); } );

my form:

<div class="form-group name-group"> <label for="inputname">your name</label> <div class="input-group"> <input type="text" class="form-control" name="inputname" id="inputname" placeholder="enter name" required> <span class="input-group-addon"> <i class="glyphicon glyphicon-ok form-control-feedback"></i> </span> </div> <span class="text-block"></span> </div> <div class="form-group mail-group"> <label for="inputemail">your email</label> <div class="input-group"> <input type="email" class="form-control" id="inputemail" name="inputemail" placeholder="enter email" required> <span class="input-group-addon"> <i class="glyphicon glyphicon-ok form-control-feedback"></i> </span> </div> <span class="email-block"></span> </div> <div class="form-group message-group"> <label for="inputmessage">message</label> <div class="input-group" > <textarea name="inputmessage" id="inputmessage" class="form-control" rows="5" required></textarea> <span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span> </div> <span class="message-block"></span> </div> <input type="submit" name="submit" id="submit" value="submit" class="btn btn-info pull-right"> </div> </form>

can show markup div id of mymodal?

also, looking multiselect? if here link jquery's documentation on including multiple element queries in single selector call: http://api.jquery.com/multiple-selector/

something more like:

if($('#inputemail,#inputmessage,#inputname').val().length === 0) { alert('not filled out'); homecoming false; } else homecoming true;

also, if direct copy/paste, missing closing parenthesis on if statement:

if($('#inputemail'&&'#inputmessage'&&'#inputname').val().length === 0)&& (is_email=="valid"))

also, please clarify asking in bootstrap .css question?

javascript jquery forms twitter-bootstrap validation