0

How to use jquery validation engine in angular 2? I included jquery validation files in index.html file:

<script src="http://localhost/2017/js2/jquery.validationEngine.js" type="text/javascript"></script>
<script src="http://localhost/2017/js2/jquery.validationEngine-en.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://localhost/2017/css2/validationEngine.jquery.css">

And installed jquery in angular 2 (using npm install --save jquery and:

npm install @types/[email protected] --save-dev )

And still now it is not working.

form code <br>`<form id="idofurform" name="idofurform">
<input id="stdname" class="validate[ required,custom[onlyLetterNumber]] text-input form-control" type="text" name="stdname" placeholder="student name">
<!--onkeyup = "onlyNumbers(this.id,0,25)"-->
<input id="stdage" type="number" name="stdage" class="validate[custom[onlyNumberSp], required, custom[number],min[10],max[25]] form-control" placeholder="student age">
<input class="validate[ required, custom[email]] form-control" type="email" id="stdemail" name="stdemail" placeholder="student email">
<!-- onkeyup = "onlyNumbers(this.id,0,1000000000000)" -->
<input maxlength="10" class="validate[custom[onlyNumberSp],required,maxSize[10],minSize[10], custom[phone]] text-input form-control" name="stdphone" id="stdphone" type="phone" name="stdphone" class="form-control">
</form>

my ts code

constructor(){
  $(document).ready(function(){
     $("#idofurform").validationEngine();
  });
}

It showing error [ts] Property 'validationEngine' does not exist on type 'JQuery'.

ERROR in /home/midhilaj/Desktop/angularhost3/src/app/components/home.component.ts (25,23): Property 'validationEngine' does not exist on type 'JQuery'. webpack: Failed to compile

Improve this question
7
  • are you using cli? Commented Jul 12, 2017 at 8:28
  • yes , i am using cli Commented Jul 12, 2017 at 8:33
  • i think you need to export the files in scripts in angular cli .json file then it will work Commented Jul 12, 2017 at 9:26
  • i don't know how to do that , please guide me Commented Jul 12, 2017 at 9:29
  • you have ur angular-cli,json file. over there in scripts array paste the relative path of jquery from node modules folder this might do the trick Commented Jul 12, 2017 at 11:04

1 Answer 1

Reset to default
1

I finally found solution for it
step 1: adding required files in index.html file

<script src="assets/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="assets/jquery.validationEngine.js" type="text/javascript"></script>
<script src="assets/jquery.validationEngine-en.js" type="text/javascript"></script>
<link rel="stylesheet" href="assets/validationEngine.jquery.css">

step 2: my app.component.html file

<form id="idofurform" name="idofurform">
<input id="stdname" class="validate[ required,custom[onlyLetterNumber]] text-input form-control" type="text" name="stdname" placeholder="student name">
<!--onkeyup = "onlyNumbers(this.id,0,25)"-->
<input id="stdage" type="number" name="stdage" class="validate[custom[onlyNumberSp], required, custom[number],min[10],max[25]] form-control" placeholder="student age">
<input class="validate[ required, custom[email]] form-control" type="email" id="stdemail" name="stdemail" placeholder="student email">
<!-- onkeyup = "onlyNumbers(this.id,0,1000000000000)" -->
<input maxlength="10" class="validate[ custom[onlyNumberSp],required,maxSize[10],minSize[10], custom[phone]] text-input form-control" name="stdphone" id="stdphone" type="phone" name="stdphone" class="form-control">

step 3: app.comonent.ts file 

import { Component } from '@angular/core';
declare var $:any;
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app works!';

 constructor(){
 (<any>$(document)).ready(function() {
       (<any>$("#idofurform")).validationEngine();                       
    });
  }
}
check() {   
 (<any>$(document)).ready(function() {
  // (<any>$("#idofurform")).validationEngine();
   (<any>jQuery("#idofurform")).validationEngine('attach', {bindMethod:"live"});
});
 return $("#idofurform").validationEngine('validate');
 }

ref

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.