2016-06-13 22 views
0

私のフォーム用の簡単なウィザードを作成しようとしています。しかし、それは私に "CursusWizard.js:3 Uncaught TypeError:form.stepsは関数ではありません"というエラーを与えます。未知の型エラー:form.stepsは関数ではありません

私はAngularで初めて作業していますが、私のjavascriptが適切に動作していないと思われるかもしれません。ここで

は、フォームと私のhtmlです:ここでは

<!DOCTYPE html> 
<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
    <title> Cursus </title> 
    </head> 

<form id="example-advanced-form" class="form-horizontal" name="form" action="#" ng-submit="addCursus()"> 
<h3>Cursus aanmaken</h3> 
    <fieldset> 
    <legend> Cursus informatie</legend> 

    <label for ="naam"> Cursus naam</label> 
    <input id="naam" name="naam" type="text" class="required" ng-model="formCursus.name"> 


    <label for ="cursuscode"> Cursus code</label> 
    <input id="cursuscode" name="cursuscode" type="text" class="required" ng-model="formCursus.cursuscode"> 


    <label for ="aantalec">Aantal ec </label> 
    <input name="aantalec" type="text" list="aantalec" class="required" ng-model="formCursus.aantalec"> 
    <datalist id="aantalec"> 
     <option value="Boston"> 
     <option value="Cambridge"> 
    </datalist> 

    <label for ="periode">Periode </label> 
    <input name="periode" type="text" list="periode" class="required" ng-model="formCursus.periode"> 
    <datalist id="periode"> 
     <option value="Boston"> 
     <option value="Cambridge"> 
    </datalist> 

<button class="btn-default" type="submit">Add</button> 

    <p>(*) Mandatory</p> 
</fieldset> 


<h3>Profile</h3> 
<fieldset> 
    <legend>Profile Information</legend> 

    <label for="name-2">First name *</label> 
    <input id="name-2" name="name" type="text" class="required"> 
    <label for="surname-2">Last name *</label> 
    <input id="surname-2" name="surname" type="text" class="required"> 
    <label for="email-2">Email *</label> 
    <input id="email-2" name="email" type="text" class="required email"> 
    <label for="address-2">Address</label> 
    <input id="address-2" name="address" type="text"> 
    <label for="age-2">Age (The warning step will show up if age is less than 18) *</label> 
    <input id="age-2" name="age" type="text" class="required number"> 
    <p>(*) Mandatory</p> 
</fieldset> 

<h3>Warning</h3> 
<fieldset> 
    <legend>You are to young</legend> 

    <p>Please go away ;-)</p> 
</fieldset> 

<h3>Finish</h3> 
<fieldset> 
    <legend>Terms and Conditions</legend> 

    <input id="acceptTerms-2" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms-2">I agree with the Terms and Conditions.</label> 
</fieldset> 

</form> 
    </html> 

はJavaScriptを使用して私のコードです:私は間違っ

var form = $("#example-advanced-form").show(); 

    form.steps({ 
headerTag: "h3", 
bodyTag: "fieldset", 
transitionEffect: "slideLeft", 
onStepChanging: function (event, currentIndex, newIndex) 
{ 
    // Allways allow previous action even if the current form is not valid! 
    if (currentIndex > newIndex) 
    { 
     return true; 
    } 
    // Forbid next action on "Warning" step if the user is to young 
    if (newIndex === 3 && Number($("#age-2").val()) < 18) 
    { 
     return false; 
    } 
    // Needed in some cases if the user went back (clean up) 
    if (currentIndex < newIndex) 
    { 
     // To remove error styles 
     form.find(".body:eq(" + newIndex + ") label.error").remove(); 
     form.find(".body:eq(" + newIndex + ") .error").removeClass("error"); 
    } 
    form.validate().settings.ignore = ":disabled,:hidden"; 
    return form.valid(); 
}, 
onStepChanged: function (event, currentIndex, priorIndex) 
{ 
    // Used to skip the "Warning" step if the user is old enough. 
    if (currentIndex === 2 && Number($("#age-2").val()) >= 18) 
    { 
     form.steps("next"); 
    } 
    // Used to skip the "Warning" step if the user is old enough and wants to the previous step. 
    if (currentIndex === 2 && priorIndex === 3) 
    { 
     form.steps("previous"); 
    } 
}, 
onFinishing: function (event, currentIndex) 
{ 
    form.validate().settings.ignore = ":disabled"; 
    return form.valid(); 
}, 
onFinished: function (event, currentIndex) 
{ 
    alert("Submitted!"); 
} 
}).validate({ 
errorPlacement: function errorPlacement(error, element) { element.before(error); }, 
rules: { 
    confirm: { 
     equalTo: "#password-2" 
    } 
} 
}); 

何をしているのですか?

答えて

0
var form = $("#example-advanced-form").show(); 

あなたは任意の値を返しません.SHOW()私の知識あたりとして、jqueryの中で、変数form.show()から返された値を代入しているので、おそらくフォームはメソッドメソッドstep()を持っていないとreference form.step()はエラーになります。

関連する問題