SharePoint Nintex表单如何触发jQuery校验及配置CSS

一、必须配置的控件CSS类 #

代码通过固定CSS类定位表单控件，你需要在Nintex表单设计器中给3个核心控件配置对应CSS类，否则代码无法获取控件值，完全无法运行：

• 预订开始日期控件：打开控件设置面板，找到「高级」选项卡下的CSS类输入框，填入validateFromDate
• 预订结束日期控件：同样在高级设置的CSS类项填入validateUntilDate
• 车辆选择下拉控件：CSS类配置项填入validatePoolCar

注意：CSS类名严格区分大小写，不要加额外空格、前后缀，否则选择器无法匹配到控件。代码里用到的小时、分钟下拉选择框是Nintex自带日期时间控件的默认元素，name属性自带DateHours/DateMinutes标识，不需要额外配置类名。

二、校验逻辑触发规则 #

现有代码默认已经内置了两类触发逻辑，不需要额外开发即可运行：

• 表单加载触发：页面打开时会自动拉取列表内所有历史预订记录存入本地缓存，无需手动操作
• 字段变更实时触发：当用户修改开始/结束日期、调整预订时段的小时/分钟值时，会自动执行冲突校验，发现时段重叠直接弹出提示
  *如果需要实现提交前强制拦截，避免用户填完字段直接点提交绕过校验，需要做两处修改：

1. 给提交按钮添加客户端点击事件，事件触发时主动调用一次checkOldEntries()
2. 在checkOldEntries函数里加全局冲突标记：检测到冲突时设置window.bookingConflict = true，无冲突设为false，提交按钮点击事件中判断如果该标记为true，直接return false即可阻止表单提交。

三、代码上线前必须修改的硬编码项 #

你拿到的代码里有几处写死的配置，必须改成你自己环境的实际值，否则会报错：

• 列表名配置：第二行var listName = 'P...Car Request'，单引号内的内容替换为你实际存储车辆预订记录的SharePoint列表全名，字符完全匹配才能拉取到数据
• 字段名匹配：代码接口请求里用到的FromDate（预订开始时间字段）、UntilDate（预订结束时间字段）、PoolCar（关联车辆查找字段）、CarRegistration（车辆牌照字段），如果你自己列表的内部字段名和这些不一致，要把对应位置的字段名替换成实际的内部字段名
• 冗余测试代码清理：代码最后绑定#showit元素点击事件的段是原作者写的测试代码，你表单里没有对应id的元素时直接删除即可，不影响主校验功能。

附原始参考代码：

var allItems = [];
var listName = 'P...Car Request'
NWF$(document).ready(function() {
retriveListItem();
NWF$('select[name*="DateHours"],select[name*="DateMinutes"],input.nf-date-picker').change(function() {
checkOldEntries();
});

});

function retriveListItem() {
    NWF$.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('" + listName + "')/items?$select=*,PoolCar/CarRegistration&$orderby=FromDate&$expand=PoolCar&$top=5000",
        type: 'GET',
        headers: {
            "Accept": "application/json;odata=verbose"
        },
        cache: false,
        success: function(data) {
            for (var i = 0; i < data.d.results.length; i++) {
                var item = data.d.results[i];
                item.sDate = getDateLocalFormat(item.FromDate,-5);
                item.eDate = getDateLocalFormat(item.UntilDate,5);
                allItems.push(item);
            }
        },
        error: function(data) {
            console.log(error);
        }
    });
};

function getDateLocalFormat(inputDate,min) {
    //var add_10_minutes_to_current_date = Date.dateAdd(new Date(inputDate), -5, "h");
    return Date.dateAdd(new Date(inputDate), min, "m");
    //return new Date(inputDate);
};

Date.dateAdd = function(currentDate, value, timeUnit) {
    timeUnit = timeUnit.toLowerCase();
    var multiplyBy = {
        w:604800000,
        d:86400000,
        h:3600000,
        m:60000,
        s:1000
    };
    var updatedDate = new Date(currentDate.getTime() + multiplyBy[timeUnit] * value);
    return updatedDate;

};

function checkOldEntries() {
    //var count = 0;
     var allBookings='';
    var enteredSDate = new Date(ddmmyyTommddyy(NWF$('#' + validateFromDate).val()) + ' ' + NWF$('select[name*="DateHours"]:eq(0)').val() + ':' + NWF$('select[name*="DateMinutes"]:eq(0)').val());
    var enteredEDate = new Date(ddmmyyTommddyy(NWF$('#' + validateUntilDate).val()) + ' ' + NWF$('select[name*="DateHours"]:eq(1)').val() + ':' + NWF$('select[name*="DateMinutes"]:eq(1)').val());
    if (!(enteredSDate === undefined) && !(enteredEDate === undefined))
        NWF$.each(allItems, function(i, v) {
               if(v.PoolCar.CarRegistration == NWF$('#' + validatePoolCar).val().split('#')[1])
               {
                    
            if (((enteredSDate > v.sDate && enteredEDate < v.eDate) || (enteredEDate > v.sDate && enteredEDate < v.eDate) || (enteredSDate > v.sDate && enteredSDate < v.eDate)) || (enteredSDate <= v.sDate && enteredEDate >= v.eDate) ) {
                       if(allBookings==''){
                            allBookings='The selected pool car '+v.PoolCar.CarRegistration+' is already booked on \n';
                       }
                        allBookings+='\n'+dateFormatddMMyyyyHHmm(v.sDate) +' >> '+dateFormatddMMyyyyHHmm(v.eDate);
                  console.log(v);
               }}
        });
          if(allBookings!=''){
                allBookings+='\n\nPlease choose a different date.';
               alert(allBookings);
               allBookings='';
          }
          
          
          
};
function dateFormatddMMyyyyHHmm(inputDate) {
    var d = new Date(inputDate),
        dformat = [ 
                    d.getDate().padLeft(),(d.getMonth()+1).padLeft(),
                    d.getFullYear()].join('/')+
                    ' ' +
                  [ d.getHours().padLeft(),
                    d.getMinutes().padLeft()].join(':');
                         //,d.getSeconds().padLeft()].join(':');
                         return dformat;
};
function ddmmyyTommddyy(inputDate) {
    var dateS = inputDate.split('/');
    return dateS[1] + '/' + dateS[0] + '/' + dateS[2];
};


Number.prototype.padLeft = function(base,chr){
   var  len = (String(base || 10).length - String(this).length)+1;
   return len > 0? new Array(len).join(chr || '0')+this : this;
}
    
$('#showit').click(function(){
   
     $('#result').html(dformat);
});

内容的提问来源于stack exchange，提问作者Curb