Asp.net mvc 4 页面加载时突出显示下拉字段的剔除验证

我们使用了敲除验证，并删除了两个下拉字段——国家和州在页面加载后立即突出显示。我们只希望它在用户尝试保存页面后验证并突出显示

<!-- Add/Edit Template -->
<script id="editTemplate" type="text/html">
    <fieldset style="position: relative;" data-bind="with: $root.currentGraduateEducationNonMed">
        <legend>@ViewBag.Title</legend>

        <div style="margin-bottom: 20px;">
            Please enter non-medical graduate education information.
        </div>

        <!-- ko template: "errorsTemplate" -->
        <!-- /ko -->

        <ul class="input_group">
            <li>
                <label class="required_label">School Name</label>
                <input type="text" data-bind="value: schoolName" maxlength="80">
            </li>
            <li>
                <label class="required_label">City</label>
                <input type="text" data-bind="value: city" maxlength="40">
            </li>
            <li>
                <label class="required_label">Country:</label>
                <select data-bind="options: $root.countries, optionsText: 'countryName', optionsValue: 'countryId', optionsCaption: 'Please Select', value: $root.selectedCountryId, event: { change: $root.countryChanged }"></select>
            </li>
            <li>
                <label class="required">State / Province</label>
                <select data-bind="options: $root.states, optionsText: 'stateOrProvinceDescription', optionsValue: 'stateOrProvinceId', optionsCaption: $root.statesCaption, value: stateOrProvinceId"></select>
            </li>
            <li>
                <label class="required_label">Area of Study</label>
                <input type="text" data-bind="value: areaOfStudy" maxlength="50">
            </li>
            <li>
                <label class="required_label">Date Degree Conferred</label>
                <input type="text" data-bind="date: dateDegreeConferred" style="width: 140px;">
            </li>
        </ul>
        <div class="actions">
            <button data-bind="click: $root.save">Save</button>
            <button data-bind="click: $root.closeEditor">Cancel</button>
        </div>

    </fieldset>
</script>

module Models.Addendums {

    export interface IWyomingGraduateEducationNonMed {
        //DEFN - Add property to interface
        graduateEducationId: number;
        schoolName: string;
        city: string;
        stateOrProvinceId: number;
        stateOrProvince: Models.IStateOrProvinceLookup;
        areaOfStudy: string;
        dateDegreeConferred: Date;

    }

    export class WyomingGraduateEducationNonMed extends BaseObject {

        constructor(options?: {
            graduateEducationId: number;
            schoolName: string;
            city: string;
            stateOrProvinceId: number;
            stateOrProvince: Models.StateOrProvinceLookup;
            areaOfStudy: string;
            dateDegreeConferred: Date;
        }) {
            super();

            if (options) {
                this.graduateEducationId(options.graduateEducationId);
                this.schoolName(options.schoolName);
                this.city(options.city);
                this.stateOrProvinceId(options.stateOrProvinceId);
                this.stateOrProvince(options.stateOrProvince);
                this.areaOfStudy(options.areaOfStudy);
                this.dateDegreeConferred(options.dateDegreeConferred);
            }

            // Set the initial state
            this.setState();
        }


        graduateEducationId: KnockoutObservable<number> = ko.observable(null);
        schoolName: KnockoutObservable<string> = ko.observable(null).extend({ required: { message: "Please enter a school name." } });
        city: KnockoutObservable<string> = ko.observable(null).extend({ required: { message: "Please enter a city." } });
        stateOrProvinceId: KnockoutObservable<number> = ko.observable(null).extend({ required: { message: "Please select a state/province." } });
        stateOrProvince: KnockoutObservable<Models.StateOrProvinceLookup> = ko.observable(null);
        areaOfStudy: KnockoutObservable<string> = ko.observable(null).extend({ required: { message: "Please enter an area of study." } });
        dateDegreeConferred: KnockoutObservable<Date> = ko.observable(null).extend({ required: { message: "Please enter a date degree conferred." } });

        fromData = (data: IWyomingGraduateEducationNonMed) => {

            this.graduateEducationId(data.graduateEducationId);
            this.schoolName(data.schoolName);
            this.city(data.city);
            this.stateOrProvinceId(data.stateOrProvinceId);
            if (data.stateOrProvince != null) {
                // Load data for Fsmb_StateOrProvinceLookup
                var stateOrProvince = new Models.StateOrProvinceLookup();
                stateOrProvince.fromData(data.stateOrProvince);
                this.stateOrProvince(stateOrProvince);
            }
            this.areaOfStudy(data.areaOfStudy);
            this.dateDegreeConferred(data.dateDegreeConferred);

            // Set the initial state
            this.setState();
        }

    }




} 

module ViewModels.Addendums {
    export class WyomingGraduateEducationNonMedViewModel {

        //-----------------------------------------------------------------------------------
        // Constructor / Initial Setup

        constructor() {
            ko.validation.init({
                insertMessages: false,
                decorateElement: true,
                errorElementClass: "input-validation-error"
            });

            Q.all([
                this.loadGraduateEducationNonMed(),
                this.loadCountries()
            ]).fail((error: any) => {
                    this.errors([error]);
                }).fin(() => {
                    $("#loading").css("display", "none");
                });
        }


        //-----------------------------------------------------------------------------------
        // Properties

        template = ko.observable<string>("mainTemplate");
        errors = ko.observableArray<string>([]);

        graduateEducationNonMed = ko.observableArray<Models.Addendums.WyomingGraduateEducationNonMed>([]);
        currentGraduateEducationNonMed = ko.observable<Models.Addendums.WyomingGraduateEducationNonMed>(null);

        countries = ko.observableArray<Models.CountryLookup>([]);
        selectedCountryId = ko.observable<number>(null).extend({ required: { message: "Please select a country" } });
        //countriesCaption = ko.observable<string>("Please Select");

        states = ko.observableArray<Models.StateOrProvinceLookup>();
        statesCaption = ko.observable<string>("Please Select");


        //-----------------------------------------------------------------------------------
        // Functions / Event Handlers

        //log = (message: string) => {
        //    if (window && window.console && window.console.log) {
        //        var dt = new Date();
        //        var ts = (dt.toString()).substr(16, 2) + (dt.toISOString()).substr(13, 10);
        //        console.log(ts + ' - ' + message);
        //    }
        //}

        loadGraduateEducationNonMed = (): Q.Promise<void> => {
            var service = new Services.Addendums.WyomingGraduateEducationNonMedService();
            return service.getByFid()
                .then((graduateEducationNonMed: Array<Models.Addendums.WyomingGraduateEducationNonMed>) => {
                    graduateEducationNonMed = graduateEducationNonMed.sort(function (a: Models.Addendums.WyomingGraduateEducationNonMed, b: Models.Addendums.WyomingGraduateEducationNonMed) {
                        var keyA = a.dateDegreeConferred();
                        var keyB = b.dateDegreeConferred();
                        return ((keyA < keyB) ? -1 : ((keyA > keyB) ? 1 : 0));
                    });
                    this.graduateEducationNonMed(graduateEducationNonMed);
                });
        }

        loadCountries = (): Q.Promise<void> => {
            var countryService = new Services.CountryLookupService();
            return countryService.getAll()
                .then((countries: Array<Models.CountryLookup>) => {
                    this.countries(countries);
                });
        }

        formatDate = (date: Date): string => {
            if (date == null) { return "";}
            return moment(date).format("MM/DD/YYYY");
        }

        create = () => {
            this.currentGraduateEducationNonMed(new Models.Addendums.WyomingGraduateEducationNonMed());
            this.template("editTemplate");
        }

        edit = (graduateEducationNonMed: Models.Addendums.WyomingGraduateEducationNonMed) => {

            // Select current country in list
            var country: Models.CountryLookup = this.getCountry(graduateEducationNonMed.stateOrProvince().countryId());
            this.selectedCountryId(country.countryId());


            this.currentGraduateEducationNonMed(graduateEducationNonMed);

            // Retrieve StateOrProvinces; select current stateOrProvince in list
            this.populateStates(country.countryId(), graduateEducationNonMed.stateOrProvinceId());

            this.template("editTemplate");
        }

        getCountry = (countryId: number) => {
            var country: Models.CountryLookup = null;
            $.each(this.countries(), (index: number, c: Models.CountryLookup) => {
                if (c.countryId() === countryId) {
                    country = c;
                }
            });
            return country;
        }

        countryChanged = () => {
            // Load states by country
            var countryId = this.selectedCountryId();
            this.populateStates(countryId);
        }

        populateStates = (countryId: number, stateId?: number) => {
            // Display busy
            $("#loadingCover").css("display", "block");

            this.states(new Array<Models.StateOrProvinceLookup>());

            // Load states
            if (countryId == null) {
                $("#loadingCover").css("display", "none");
            } else {
                this.statesCaption("Loading...");

                var stateService = new Services.StateOrProvinceLookupService();

                stateService.getByCountry(countryId)
                    .then((states: Array<Models.StateOrProvinceLookup>) => {
                        this.states(states);

                        if (stateId != null) {
                            // Re-select stateOrProvince
                            //  (model value is blanked out when model is bound to template when StateOrProvince is missing from dropdown)
                            this.currentGraduateEducationNonMed().stateOrProvinceId(stateId);
                        }
                        this.statesCaption("Please Select");
                    })
                    .fail((error: any) => {
                        // Add this error to errors
                        this.errors([error]);
                    })
                    .fin(() => {
                        // Hide spinner
                        $("#loadingCover").css("display", "none");
                    });
            }
        }

        save = (graduateEducationNonMed: Models.Addendums.WyomingGraduateEducationNonMed) => {

            // Check to see if elements are valid
            var errors = ko.validation.group(this.currentGraduateEducationNonMed());

            if (errors().length > 0) {
                // Errors have been found, stop processing
                this.errors(errors());
                errors.showAllMessages();
                return;
            } else {
                this.errors([]);
            }

            if (graduateEducationNonMed.isDirty()) {

                // Display spinner
                $("#loadingScreen").css("display", "block");

                var service = new Services.Addendums.WyomingGraduateEducationNonMedService();

                service.update(graduateEducationNonMed)
                    .then(() => {
                        this.loadGraduateEducationNonMed();
                        this.closeEditor();
                    })
                    .fail((error: any) => {
                        this.errors([error]);
                    })
                    .fin(() => {
                        $("#loadingScreen").css("display", "none");
                    });

            } else {
                // Nothing has changed; close edit mode
                this.closeEditor();
            }
        }

        // Called when cancelling changes, and also to reset after saving changes
        closeEditor = () => {
            var graduateEducationNonMed = this.currentGraduateEducationNonMed();

            // Unbind, to allow reverting lookup values not included in select options
            this.currentGraduateEducationNonMed(null);

            if (graduateEducationNonMed.isDirty())
                graduateEducationNonMed.revertState();

            this.selectedCountryId(null);
            //this.countriesCaption("Please Select");

            this.states.removeAll();

            this.errors([]);
            this.template("mainTemplate");
        }

        remove = (graduateEducationNonMed: Models.Addendums.WyomingGraduateEducationNonMed) => {
            $("#loadingScreen").css("display", "block");

            var service = new Services.Addendums.WyomingGraduateEducationNonMedService();

            service.remove(graduateEducationNonMed.graduateEducationId())
                .then(() => {
                    this.loadGraduateEducationNonMed();
                    this.template("mainTemplate");
                })
                .fail((error: any) => {
                    this.errors([error]);
                }).fin(() => {
                    $("#loadingScreen").css("display", "none");
                });
        }

        next = () => {
            $("#loadingCover").css("display", "block");
            var redirectUri = Application.Settings.baseUrl + "Addendum/StaffPrivileges";
            window.location.href = redirectUri;
        }
    }
}

$(document).ready(() => {
    var graduateEducationNonMedViewModel = new ViewModels.Addendums.WyomingGraduateEducationNonMedViewModel();
    ko.applyBindings(graduateEducationNonMedViewModel);
}); 

@视图包。标题
请输入非医学研究生教育信息。


校名


城市


国家：


州/省


研究领域


授予学位的日期


拯救
取消
模块模型.附录{
导出接口IWYOMING毕业教育非MED{
//DEFN-将属性添加到接口
毕业生教育ID：编号；
学名：string；
城市：字符串；
stateOrProvinceId：编号；
stateOrProvince:Models.IStateOrProvinceLookup；
研究领域：字符串；
dateDegreeConferred：日期；
}
导出类WyomingGradateEducationNonMed扩展BaseObject{
构造函数（选项？：{
毕业生教育ID：编号；
学名：string；
城市：字符串；
stateOrProvinceId：编号；
stateOrProvince:Models.StateOrProvinceLookup；
研究领域：字符串；
dateDegreeConferred：日期；
}) {
超级（）；
如果（选项）{
此.graduateEducationId（选项.graduateEducationId）；
this.schoolName（选项.schoolName）；
this.city（options.city）；
此.stateOrProvinceId（选项.stateOrProvinceId）；
this.stateorprovance（options.stateorprovance）；
此.areaOfStudy（选项.areaOfStudy）；
this.dateDegreeConferred（options.dateDegreeConferred）；
}
//设置初始状态
this.setState（）；
}
graduateEducationId:KnockoutObservable=ko.observable（空）；
schoolName:KnockoutObservable=ko.observable（null）.extend（{必需：{消息：“请输入学校名称”。}）；
city:KnockoutObservable=ko.observable（null）.extend（{required:{message:“请输入一个城市。”}）；
stateOrProvinceId:KnockoutObservable=ko.observable（null）.extend（{required:{message:“请选择一个州/省”。}}）；
stateorprovance:KnockoutObservable=ko.observable（null）；
areaOfStudy:KnockoutObservable=ko.observable（null）.extend（{必需：{消息：“请输入一个研究区域。”}）；
dateDegreeConferred:KnockoutObservable=ko.observable（null）.extend（{必需：{消息：“请输入授予的日期度数。”}）；
fromData=（数据：IWYOMING毕业教育非MED）=>{
这个.graduateEducationId（data.graduateEducationId）；
this.schoolName（data.schoolName）；
此.city（data.city）；
this.stateOrProvinceId（data.stateOrProvinceId）；
if（data.stateOrProvince！=null）{
//加载Fsmb_状态或ProvinceLookup的数据
var stateOrProvince=新模型。StateOrProvinceLookup（）；
stateOrProvince.fromData（data.stateOrProvince）；
这个。州或省（州或省）；
}
本研究领域（data.areaOfStudy）；
此.dateDegreeConferred（数据.dateDegreeConferred）；
//设置初始状态
this.setState（）；
}
}
} 
模块视图模型.附录{
导出类WyomingGraduateEducationNonMedViewModel{
//-----------------------------------------------------------------------------------
//建造商/初始设置
构造函数（）{
ko.validation.init({
insertMessages:false，
装饰元素：是的，
errorElementClass:“输入验证错误”
});
所有人([
此.loadGraduateEducationNonMed（），
这是
]).失败（（错误：任意）=>{
这是错误（[error]）；
}).fin（（）=>{
$（“#加载”）.css（“显示”、“无”）；
});
}
//-----------------------------------------------------------------------------------
//性质
模板=ko.可观察（“主模板”）；
误差=ko.observearray（[]）；
研究生教育程度非med=ko.observearray（[]）；
currentGraduateEducationNonMed=ko.可观察（空）；
国家=ko.observableArray（[]）；
selectedCountryId=ko.observable（null）.extend（{required:{message:“请选择一个国家”}}）；
//countriesCaption=ko.可观察（“请选择”）；
状态=ko.observearray（）；
statesCaption=ko.可观察（“请选择”）；
//-----------------------------------------------------------------------------------
//函数/事件处理程序
//日志=（消息：字符串）=>{
//if（window&&window.console&&window.console.log）{
//var dt=新日期（）；
//var ts=（dt.toString（））.substr（16,2）+（dt.toISOString（））.substr（13,10）；
//console.log（ts+'-'+消息）；
//    }
//}
loadGraduateEducationNonMed=（）：Q.Promise=>{
var service=new Services.Addendums.WyomingGraduateEducationNonMedService（）；
return service.getByFid（）
.then（（毕业生教育非标准：数组）=>{
毕业典礼
this.selectedCountryId.isModified(false);