+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: External Javascript Doesnot work (/showthread.php?tid=59546)
External Javascript Doesnot work - El Forum - 10-19-2013
[eluser]razerone[/eluser]
Hi.
I have a external javascript validation for my contact page but I have tried it a couple of ways to make it work for validation.
The first way I tried it was attach it to the bottom ov the email.php view page no go there.
The Second way I tried was to create a js file and link it to bottom of footer no luck also.
I have got the ajax and jquary librarys etc http://www.carrarawebsitesolutions.com/contact/ any ideas please i got it to work on my test software http://codepen.io/CarraraWebsiteSolutions/pen/rIALo
<form role="form" method="post" acti echo base_url('contact/confirmation');?>" id="contact-form">
<label for="name">Name</label>
<div class="form-group">
<input class="form-control" id="focusedInput" type="text" name="name" placeholder="Name">
</div>
<label for="email"><i class="icon-envelope-alt"></i> Email</label>
<div class="form-group">
<input class="form-control" id="focusedInput" type="text" name="email" placeholder="Email">
</div>
<label for="subject"><i class="icon-sun"></i> Subject</label>
<div class="form-group">
<input class="form-control" id="focusedInput" type="text" name="subject" placeholder="Place Your Subject Here">
</div>
<label for="message"><i class="icon-comments"></i> Message</label>
<div class="form-group">
<textarea type="text" class="form-control" rows="10" placeholder="Send Me A Message it sucks when u have something awesome to say but then the subject changes" name="message"></textarea>
</div>
<div class="pager">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-danger">Reset</button>
</div>
</form>
public function index(){
$this->load->view('header');
$this->load->view('email');
$this->load->view('footer');
}
public function confirmation() {
$this->load->library('email');
$this->load->helper('form');
$this->load->helper('url');
$this->load->library('form_validation');
$this->form_validation->set_rules( 'email', 'Email', 'trim|required' );
$this->form_validation->set_rules( 'username', 'Username', 'trim|required' );
$this->form_validation->set_rules( 'subject', 'Subject', 'trim|required' );
$this->form_validation->set_rules( 'message', 'Message', 'trim|required' );
$this->email->from($this->input->post('email'), $this->input->post('name'));
$this->email->to('info@demo.com');
$this->email->subject($this->input->post('subject'));
$this->email->message($this->input->post('message'));
if($this->email->send()) {
$this->load->view('header');
$this->load->view('confirmation');
$this->load->view('footer');
}
else {
show_error($this->email->print_debugger());
}
}
/* Bootstrap Contact Form Carrara Website Solutions "Do Not Remove"
***************************************************************************/
$(document).ready(function(){
// validate signup form on keyup and submit
//jQuery.validator.addMethod("phoneAus",function(a,b){return this.optional(b)||a.length>14&&a.match(/^[0-9]{10}$|^\(0[1-9]{1}\)[0-9]{8}$|^[0-9]{8}$|^[0-9]{4}[ ][0-9]{3}[ ][0-9]{3}$|^\(0[1-9]{1}\)[ ][0-9]{4}[ ][0-9]{4}$|^[0-9]{4}[ ][0-9]{4}$/)},"Please specify a valid mobile number");
jQuery("#contact-form").validate({
highlight: function(element) {
$(element).parent('div').addClass('has-error');
},
unhighlight: function(element) {
$(element).parent('div').addClass('has-success');
},
rules: {
name: {
required: true
},
email: {
required: true
},
subject: {
required: true
},
message: {
required: true,
minlength: 15
}
},
messages: {
name: {
required: 'Please enter your name.'
},
email: {
required: 'Please enter a valid email address.',
minlength: 'Please enter a valid email address.'
},
subject: {
required: 'You need to enter a subject.'
},
message: {
required: 'You need to enter a message.',
minlength: 'Enter at least {15} characters.',
maxlength: 'Enter at least {5000} characters.'
}
},
});
});
External Javascript Doesnot work - El Forum - 10-19-2013
[eluser]Otemu[/eluser]
Hi,
If your using JQuery validation then you need to reference the actual plugin, as your getting the following error:
jQuery(...).validate is not a function
Which means that function doesn't exist, check out more information on validation here http://jqueryvalidation.org/
Also your referencing JQuery several times:
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
http://code.jquery.com/jquery.js
http://www.carrarawebsitesolutions.com/assets/js/jquery.js
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
http://code.jquery.com/jquery.js
No need to make so many calls
External Javascript Doesnot work - El Forum - 10-19-2013
[eluser]razerone[/eluser]
I am getting a programmer to fix issue