Laravel Blade中jQuery函数空值报错及语法问题求助

在Laravel Blade中设置按钮逻辑：当$first_step_validation不为空时，按钮点击调用validate_first_step()函数；为空时不绑定该函数。但实际运行出现两个问题：

• 当$first_step_validation为null时，页面渲染阶段抛出"Attempt to read min_value on null"错误，疑惑为何未触发函数却报错
• 尝试修改函数内变量定义后，原错误消失，但控制台出现"function $first_step_validation is not defined"错误

现有代码展示 #

Blade按钮代码 #

@if(!empty($first_step_validation))
    <button onclick="validate_first_step()" class="next action-button" type="button" name="next">(Save & Next)</button>
@else
    <button class="next action-button" type="button" name="next"> (Save & Next)</button>
@endif

jQuery函数代码 #

function validate_first_step() {
var target_value_entry = $('input[name="target_value"]').val();
var tag = {!! $workstep->subprocess_id !!} ; 

var first_step_min = {!! $first_step_validation->min_value !!} ;
var first_step_max = {!! $first_step_validation->max_value !!} ;

var first_step_target = {!! $first_step_validation->target_value !!} ;

console.log(first_step_min);
console.log(first_step_max);
console.log(first_step_target);

if(target_value_entry > first_step_min && target_value_entry < first_step_max) {
     alert('You are doing well.');
}
if(target_value_entry < first_step_min) {
     alert(`Warning! Your entry for this step is below the expected target value of: ${first_step_min}`)
}
if(target_value_entry > first_step_max) {
     alert(`Warning! Your entry for this step is above the expected target value of: ${first_step_max}`)
}
}

问题原因解析 #

第一个问题：页面渲染阶段的Blade编译错误 #

即使按钮没有绑定onclick事件，validate_first_step()函数的代码仍然会被Blade引擎编译输出到页面。当$first_step_validation为null时，Blade编译{!! $first_step_validation->min_value !!}这一行时，会直接尝试访问null对象的min_value属性，因此抛出错误——这个错误发生在页面渲染阶段，和函数是否被调用无关。

第二个问题：Blade语法错误 #

你将{!! !!}改为{ }是错误的：Blade中输出变量必须使用{{ }}（转义输出）或{!! !!}（不转义输出），单独的{ }不是合法的Blade语法。浏览器会把{ $first_step_validation->min_value ?? ""}识别为JS代码，将$first_step_validation当成未定义的JS变量，因此报错。

正确解决方案 #

方案1：仅在变量非空时渲染函数 #

将整个validate_first_step()函数包裹在Blade的@if判断中，当$first_step_validation为空时，函数根本不会被渲染到页面，从根源避免错误：

@if(!empty($first_step_validation))
    <button onclick="validate_first_step()" class="next action-button" type="button" name="next">(Save & Next)</button>

    <script>
    function validate_first_step() {
        var target_value_entry = $('input[name="target_value"]').val();
        var tag = {!! $workstep->subprocess_id !!} ; 

        var first_step_min = {!! $first_step_validation->min_value !!} ;
        var first_step_max = {!! $first_step_validation->max_value !!} ;

        var first_step_target = {!! $first_step_validation->target_value !!} ;

        console.log(first_step_min);
        console.log(first_step_max);
        console.log(first_step_target);

        if(target_value_entry > first_step_min && target_value_entry < first_step_max) {
             alert('You are doing well.');
        }
        if(target_value_entry < first_step_min) {
             alert(`Warning! Your entry for this step is below the expected target value of: ${first_step_min}`)
        }
        if(target_value_entry > first_step_max) {
             alert(`Warning! Your entry for this step is above the expected target value of: ${first_step_max}`)
        }
    }
    </script>
@else
    <button class="next action-button" type="button" name="next"> (Save & Next)</button>
@endif

方案2：在函数中处理空值（保留函数全局存在） #

如果函数需要始终存在（比如其他地方可能调用），则使用Blade的可选链式调用和空值合并语法，确保编译出合法的JS代码：

function validate_first_step() {
    var target_value_entry = $('input[name="target_value"]').val();
    var tag = {!! $workstep->subprocess_id !!} ; 

    // 用可选链式调用+空值合并，确保变量为空时输出JS的null
    var first_step_min = {!! $first_step_validation?->min_value ?? 'null' !!} ;
    var first_step_max = {!! $first_step_validation?->max_value ?? 'null' !!} ;

    var first_step_target = {!! $first_step_validation?->target_value ?? 'null' !!} ;

    // 参数为空时直接退出函数，避免后续逻辑报错
    if(first_step_min === null || first_step_max === null) {
        return;
    }

    console.log(first_step_min);
    console.log(first_step_max);
    console.log(first_step_target);

    if(target_value_entry > first_step_min && target_value_entry < first_step_max) {
         alert('You are doing well.');
    }
    if(target_value_entry < first_step_min) {
         alert(`Warning! Your entry for this step is below the expected target value of: ${first_step_min}`)
    }
    if(target_value_entry > first_step_max) {
         alert(`Warning! Your entry for this step is above the expected target value of: ${first_step_max}`)
    }
}

这里$first_step_validation?->min_value是Laravel的可选链式调用语法，当$first_step_validation为null时，不会尝试访问min_value，直接返回null；?? 'null'则确保Blade编译后输出JS的null值，保证JS代码语法合法。

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