jquery validation engine in angular 2

Question

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/jquery@2.0.47 --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

i think you need to export the files in scripts in angular cli .json file then it will work — Rahul Singh, Jul 12 '17 at 09:26
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 — Rahul Singh, Jul 12 '17 at 11:04
after adding this "scripts": ["src/assets/jquery.validationEngine.js " ]
again ERROR in multi script-loader!./src/src/assets/jquery.validationEngine.js — , Jul 12 '17 at 11:27
it wont be assets the file path will be from node modules jquery u will have a node moduiles folder in that find jquery — Rahul Singh, Jul 12 '17 at 11:51

score 1 · Answer 1 · 2017-08-25T09:13:01.723

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

jquery validation engine in angular 2

1 Answers1