输入按钮的角度验证

Question

我有一个字段集，要求用户输入一些数据，例如姓名、电子邮件和电话号码，如下所示：

        <h2 class="fs-title">Personal data</h2>
        <input type="text" name="firstname" id="firstname" placeholder="First Name" class="textbox" ng-model="firstName"required/>
        <input type="text" name="lastname" id="lastname" placeholder="Last Name" class="textbox" ng-model="lastName" required/>
        <input type="email" name="email" class="textbox" placeholder="Email" ng-model="user.email" required>
        <input type="text" name="contact" placeholder="Phone number" id="contact" ng-model="phoneNumber" required/>
        <input type="button" name="next" class="next action-button" value="Next"/>

next 类有一个与之关联的函数：

var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches


$(".next").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

    //show the next fieldset
    next_fs.show();

    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.2;
            //2. bring next_fs from the right(50%)
            left = (now * 50)+"%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({
                'transform': 'scale('+scale+')',
                'position': 'absolute'
            });
            next_fs.css({'left': left, 'opacity': opacity});
        },
        duration: 800,
        complete: function(){
            current_fs.hide();
            animating = false;
        },
        //this comes from the custom easing plugin
        // easing: 'easeInOutBack'
        linear: 'easeInOutBack'
    });
});

在当前状态下，即使表单没有正确填写，您也可以单击“下一步”，即使它是空的，我不希望这样。我想在单击下一步时检查输入是否正确填写，如果没有，则在每个字段下显示一条消息/警告，说明问题所在（即在电子邮件中，它必须包含@）

我尝试使用引导程序中的 btn btn-primary 类，但如果我使用它们（它们按照我的意愿进行验证），我将无法再使用我的下一个类。任何想法如何使它工作？ 我尝试了 Angular 指令，例如 ng-disable，条件是这些字段为空，但由于某种原因，如果我填写这些字段，按钮仍然不起作用，所以我如何使用 btn btn-primary 并且仍然有我的下一节课?

Answer 1

使用表单api：

<form ng-submit="saveForm(MyForm.$valid)" name="MyForm">
   <input ng-model="myField" required>
   <button type="submit">Next</button>
</form>

在控制器的某处：

function saveForm(isValid){
   if(!isValid) showErrors();
   save();
}