diff --git a/resources/beike/admin/css/_bootstrap-extra.scss b/resources/beike/admin/css/_bootstrap-extra.scss
index 8beafd6e..3ea546b3 100644
--- a/resources/beike/admin/css/_bootstrap-extra.scss
+++ b/resources/beike/admin/css/_bootstrap-extra.scss
@@ -224,3 +224,11 @@ table.table {
   max-width: 560px;
 }
 
+.error-invalid-input {
+  border-color: #dc3545;
+  padding-right: calc(1.5em + 0.75rem);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right calc(0.375em + 0.1875rem) center;
+  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
\ No newline at end of file
diff --git a/resources/beike/admin/js/bootstrap-validation.js b/resources/beike/admin/js/bootstrap-validation.js
index 5cb579ac..bd7c3c01 100644
--- a/resources/beike/admin/js/bootstrap-validation.js
+++ b/resources/beike/admin/js/bootstrap-validation.js
@@ -21,13 +21,23 @@ $(function () {
         }
 
         form.classList.add("was-validated");
+        $('.nav-link, .nav-item').removeClass('error-invalid');
+
 
         // 如果错误输入框在 tab 页面，则高亮显示对应的选项卡
         $('.invalid-feedback').each(function(index, el) {
-          if ($(el).css('display') == 'block' && $(el).parents('.tab-pane')) {
-            const id = $(el).parents('.tab-pane').prop('id');
+          if ($(el).css('display') == 'block') {
+            // 兼容使用 element ui input、autocomplete 组件，在传统提交报错ui显示
+            if ($(el).siblings('div[class^="el-"]')) {
+              console.log(11)
+              $(el).siblings('div[class^="el-"]').find('.el-input__inner').addClass('error-invalid-input')
+            }
 
-            $(`a[href="#${id}"], button[data-bs-target="#${id}"]`).addClass('error-invalid');
+            if ($(el).parents('.tab-pane')) {
+              const id = $(el).parents('.tab-pane').prop('id');
+
+              $(`a[href="#${id}"], button[data-bs-target="#${id}"]`).addClass('error-invalid');
+            }
           }
         });
       },
diff --git a/resources/beike/admin/views/pages/products/form/form.blade.php b/resources/beike/admin/views/pages/products/form/form.blade.php
index c825e70e..cf838b69 100644
--- a/resources/beike/admin/views/pages/products/form/form.blade.php
+++ b/resources/beike/admin/views/pages/products/form/form.blade.php
@@ -102,7 +102,7 @@
               <h5 class="border-bottom pb-3 mb-4">{{ __('admin/product.stocks') }}</h5>
 
               <x-admin::form.row :title="__('admin/product.enable_multi_spec')">
-                <el-switch v-model="editing.isVariable" class="mt-2"></el-switch>
+                <el-switch v-model="editing.isVariable" @change="isVariableChange" class="mt-2"></el-switch>
               </x-admin::form.row>
 
               <input type="hidden" name="variables" :value="JSON.stringify(form.variables)">
@@ -291,7 +291,8 @@
                           size="small"
                           @select="(e) => {attributeHandleSelect(e, index, 'attribute')}"
                         ></el-autocomplete>
-                        <input type="text" :name="'attributes['+ index +'][attribute_id]'" v-model="item.attribute.id" class="form-control d-none">
+                        <input type="text" required :name="'attributes['+ index +'][attribute_id]'" v-model="item.attribute.id" class="form-control d-none">
+                        <div class="invalid-feedback">{{ __('common.error_required', ['name' => __('admin/attribute.index')]) }}</div>
                       </td>
                       <td>
                         <el-autocomplete
@@ -304,7 +305,8 @@
                           :placeholder="item.attribute.id == '' ? '{{ __('admin/attribute.before_attribute') }}' : '{{ __('admin/builder.modules_keywords_search') }}'"
                           @select="(e) => {attributeHandleSelect(e, index, 'attribute_value')}"
                         ></el-autocomplete>
-                        <input type="text" :name="'attributes['+ index +'][attribute_value_id]'" v-model="item.attribute_value.id" class="form-control d-none">
+                        <input type="text" required :name="'attributes['+ index +'][attribute_value_id]'" v-model="item.attribute_value.id" class="form-control d-none">
+                        <div class="invalid-feedback">{{ __('common.error_required', ['name' => __('admin/attribute.attribute_value')]) }}</div>
                       </td>
                       <td class="text-end">
                         <i @click="form.attributes.splice(index, 1)" class="bi bi-x-circle fs-4 text-danger cursor-pointer"></i>
@@ -554,6 +556,12 @@
           this.relations.products.splice(index, 1);
         },
 
+        isVariableChange(e) {
+          if (!e) {
+            this.source.variables = [];
+          }
+        },
+
         variantIsImage(e, index) {
           if (!e) {
             this.source.variables[index].values.forEach(v => {