小编Mah*_*van的帖子

我搜索过的,我发现了很多例子,但是我的一切都没什么不同.

1)最初我有一行,如果用户点击保存和下一个按钮,它会说你有3个字段丢失

2)如果用户单击addmore按钮并且他没有在文本字段中键入任何值,那么他单击保存和下一个按钮它仍然应该说3个字段丢失

3)如果用户键入克隆行中的任何一个字段,那么他单击保存和下一个按钮验证应该发生我的代码前两点正在工作

但问题是如果用户点击了更多行并且他键入了任何一个克隆字段,那么如果他点击安全和下一个按钮,required_Field该类正在应用于所有其他字段,但它应该仅适用于该行:(

如果我们能够找到用户类型的字段中最接近的元素,那么我只能将required_Field类添加到这些元素

我尝试过如下

        function additionalvalidation() {
          var myRow = $(".check").length;

          //$(".cloned_field").css("border","1px solid green");
          $(".cloned_field").change(function() {
                var myField = $(".cloned_field").val().length;
            if (myField >= 0) {
              $(".cloned_field").addClass("required_Field");
              debugger;
              $(".cloned_field").prevAll('label').find('span.required-star').removeClass('text-error-red');
              //bind_validation();
            } else {
              $(this).closest(".cloned_field").removeClass("errRed");
              $(".cloned_field").removeClass("text-error-red");
            }
            bind_validation();
            return false;
          });
        }

使用我当前的代码,我收到错误.

未捕获的TypeError:无法读取未定义的属性"长度"

$(this).closest(".cloned_field").addClass("required_Field");

我也尝试了这个

$(this).closest(".cloned-row1").addClass("required_Field");

对此问题有任何建议

我尝试了这个新的 - >

$(this).closest(".cloned_field").css({"color": "red", "border": "2px solid red"});

颜色红色和红色边框仅适用于该字段不适用于行:(

小提琴链接供参考

我正在研究mat-datepicker用户可以输入值并使用我的代码选择日期的位置它工作正常。我有一个更新按钮，默认情况下它将处于禁用模式。当用户满足两个条件时，只有更新按钮才会启用。

这是我的屏幕截图，它看起来像

如果我清除最后日期，则一旦用户输入最后日期，更新按钮将处于禁用模式，那么只有更新将在此处启用我遇到了问题

这是我的 ts 代码

dateValidator(input) {
    //console.log(input);
    console.log(Object.prototype.toString.call(input) === '[object Date]', !this.disableDate(), input.length > 0)
    if (!!input) { // null check
        if (Object.prototype.toString.call(input) === '[object Date]' && !this.disableDate() && input.length > 0) {
            this.disableUpdateBtn = false;
            console.log("Date is Valid!!");
        } else {
        this.disableUpdateBtn = true;
        console.log("Date is Invalid!!");
        }
    } else {
        this.disableUpdateBtn = true;
        console.log("Date is Invalid!!");
    }
}

这是我的HTML“更新”按钮的代码

<button mat-flat-button color="primary" (click)="updateMilestone();" cdkFocusInitial [disabled]="disableUpdateBtn">
    Update
</button>

当我单击清除按钮，然后开始输入日期，然后输入 时，出现错误01。我没有收到任何错误，但是当我开始输入 …

使用datepicker处理克隆.我在stackoverflow中搜索了我的问题我没有得到正确的东西.当用户单击原始日期的日期时,它按预期工作但是一旦用户单击克隆div中的addmore按钮,则datepicker无法正常工作.我试着给.destroy结果没有达到预期.这可能是重复的问题,但正如我所说的解决方案不适合我的情况.

这是jquery代码.

var currentDate = new Date();
$(".cloned-row1").find(".deg_date").removeClass('hasDatepicker').datepicker({
    dateFormat: "mm-dd-yy",
    changeMonth: true,
    yearRange: "-100:+0",
    changeYear: true,
    maxDate: new Date(),
    showButtonPanel: false,
    beforeShow: function () {
        setTimeout(function (){
        $('.ui-datepicker').css('z-index', 99999999999999);

        }, 0);
    }
});
$(".deg_date").datepicker("setDate", currentDate);
var count=0;
    $(document).on("click", ".edu_add_button", function () { 
        alert("checj");
        var $clone = $('.cloned-row1:eq(0)').clone(true,true);
        //alert("Clone number" + clone);
        $clone.find('[id]').each(function(){this.id+='someotherpart'});
        $clone.find('.btn_more').after("<input type='button' class='btn_less1' id='buttonless'/>")
        $clone.attr('id', "added"+(++count));
        $clone.find(".school_Name").attr('disabled', true).val('');
        $clone.find(".degree_Description").attr('disabled', true).val('');
        $clone.find("input.deg_date").datepicker();
        $(this).parents('.educat_info').after($clone);
    });
    $(document).on('click', ".btn_less1", function (){
        var len = $('.cloned-row1').length;
        if(len>1){
            $(this).closest(".btn_less1").parent().parent().parent().remove();
        }
    });

这是小提琴 …

我正在使用 Mat 日期选择器，其中有开始日期和结束日期，其中有一个验证，即结束日期不应小于开始日期

如果开始日期是 2020 年 1 月 12 日，结束日期可以是 2020 年 1 月 12 日或大于此日期，但不能是 2020 年 1 月 11 日。

目前我正在尝试使用 Min MAX 但这没有按预期工作

我在谷歌中尝试，所以没有正确

   <mat-form-field>
      <input matInput [matDatepicker]="fromDate" placeholder="Choose a date"
          [value]="getData(item2.firstPatientInDate)" [max]="today<item2.lastPatientInDate|| item2.lastPatientInDate == undefined?today:item2.lastPatientInDate" [(ngModel)]="item2.firstPatientInDate">
                    <mat-datepicker-toggle matSuffix [for]="pickerstart"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                </mat-form-field>

        <mat-form-field>
           <input matInput [matDatepicker]="pickerend" [max]="today" [min]="item2.firstPatientInDate"   placeholder="Choose a date"
                        [value]="getData(item2.lastPatientInDate)" [(ngModel)]="item2.lastPatientInDate">
                    <mat-datepicker-toggle matSuffix [for]="pickerend"></mat-datepicker-toggle>
                    <mat-datepicker #picker1></mat-datepicker>

                </mat-form-field>

我正在研究jquery clone.我有div和三个元素的地方.第一个元素是选择下拉,第二个是文本框,第三个是添加按钮.当用户单击添加按钮时,它完全克隆整个div.但是,如果用户从下拉值中选择,则需要启用其他最接近的文本框,这是第一次正常工作.如果用户单击"添加"按钮,则文本框应处于禁用模式,因为用户尚未从下拉字段中选择另一个.

这是我的jquery代码

$(document).ready(function() {
  $("#btn_add").click(function() {
    $("#duplicate").clone(true).insertAfter("#duplicate");
  });
  $("#txt_select").change(function() {
    if ($(this).find("option:selected").val() == "Other") {
      $("#sel_ipt").find("#sel_ipt").removeAttr("disabled").val('');
    } else {
      $("#sel_ipt").attr("disabled", "disabled");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<div id="duplicate">
  <select id="txt_select">
    <option>Select</option>
    <option value="First">First</option>
    <option value="Second">Second</option>
    <option value="Third">Third</option>
    <option value="Other">Other</option>
  </select>
  <input type="text" disabled id="sel_ipt" />
  <input type="submit" id="btn_add" value="Add" />
</div>

请指导我

这是我的JSBIN 链接

处理会话存储，如果用户从下拉列表中选择 (.bap_mjr) 值，然后从第一页单击下一步按钮，则在第一页中我有一个下拉列表，它将重定向到我需要显示标签的第二页。

第一页 HTML

  <select class="mslt_Field slt_major slt_mjr ipt_required" id="slt_mjr" name="slt_mjr">
     <option value="">Please Select</optio
     <option value="BA in Arts,Culture&Heritage Ma">BAACHM</option>
     <option id="bap_Mjr" class="bap_Mjr"  value="Bachelor of Arts in Persian">BAP</option>
     <option value="Bachelor of Bus Adminstration">BBA</option>
   </select>

目前我正在尝试在第一页这是我的 jquery 代码

$("#slt_mjr").change(function (){
                alert($(this).val());
                var dropselvalue = -1;
                if (document.getElementById("bap_Mjr").val())
                {
                    alert("check");
                    dropselvalue = 1;
                }
                if(window.sessionStorage) { 
                   sessionStorage.setItem("dropselvalue", dropselvalue);
               }
            });

第二页

<div class="pay_click">Welcome to second page</div>

第二页jquery代码

var dropselvalue = parseInt(sessionStorage.getItem("dropselvalue"));
    if (dropselvalue != -1) {
        if (dropselvalue === 1) {
            $(".pay_click").show() …

我正在创建HTML select下拉列表(font-size).当我从下拉列表中选择值时,例如h1.

在下拉列表中,我有需要应用h1的文本.

我试图为H1-h6中的所有标题标签创建css类,并且在每个选项的onClick上使用add和remove来应用css.

<select>
    <option>h1</option>
    <option>h2</option>
    <option>h3</option>
</select>
<div id="text">
    Text
</div>

但我现在不知道如何做到这一点. 链接

请帮助我如何

我正在使用bootstrap 5.0.2版本在这里我正在尝试汉堡菜单。

这是我的代码。

<nav class="navbar navbar-expand-lg navbar-light">
    <a class="navbar-brand" href="#">Sample</a>

    <button class="navbar-toggler" style="margin-right:5px !important;" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
                <span class="navbar-toggler-icon"></span>
              </button>
    <div class="collapse navbar-collapse top_nav" id="navbarSupportedContent">
        <ul class="navbar-nav mx-auto ">
            <li class="nav-item">
                <a href="#" class="nav-link">Home</a>
                <hr class="hr_nav">
            </li>
            <li class="nav-item "><a href="#" class="nav-link">About Us</a>
            </li>
            <li class="nav-item "><a href="#" class="nav-link">Support</a>
            </li>
            <li class="nav-item "><a href="#" class="nav-link">Contact Us</a>
            </li>
        </ul>
        <ul class="navbar navbar-nav navbar-right" style="display:flex;">
            <li>
                <button class="btn top_login">
                    Login
                </button>
            </li>
            <li>
                <button class="btn sign_btn">
                    SignUp
                </button>
            </li>
        </ul> …

我面临以下问题:

如果用户button在克隆之前单击"下一步" ,则应该说您缺少4个字段以进行验证.但是如果用户单击"addmore"按钮,然后单击下一个按钮,则应该说您缺少4个字段以进行验证.如果用户填写克隆div和原始div 中的任何必填字段,然后单击下一个按钮,则应该说您缺少7个字段以进行验证.混淆我尝试了所有方法没有任何作用

这是jquery代码

function check_for_validation_removal(element){
    var parent_div = $(element).closest("div.cloned-row1,div.cloned-row2,div.cloned-row3,div.cloned-row4,div.cloned-row5").find("input[type='text'],#txt_schName option:selected");
  console.log(parent_div);
    console.log(parent_div.length);
    var invalid_ele = 0;
            parent_div.each(function () { 
               if($(this).val().trim().length == 0)
               {
                invalid_ele = invalid_ele + 1;
               }  
            });
    console.log(invalid_ele);
    if(parent_div.length == invalid_ele){
   parent_div.each(function () { 
   $(this).removeClass("required_field"); 
      $(this).rules('remove'); 
  });

        bind_validation();
        update_errors();
    }

这是完整的小提琴链接

请建议我如何解决这些问题.