Question

IM工作在一个简单的表单上，我试图验证字段，使用下面的代码我能够验证字段并在字段为空时添加消息。 }

Answer 1

将您的javascript代码更改为以下内容：

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fillViewport="true"
    >
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:background="@color/skyBlue">

        <Button android:id="@+id/buttonMyDebt"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_marginTop="10dip"
            android:background="@color/colorAccent"
            android:textColor="@color/black"
            android:textStyle="bold"
            android:focusable="false"
            android:text="My Debt"
            android:onClick="myDebt"/>
        <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent"
            android:layout_height="40dp"
            android:columnCount="3"
            android:rowCount="3"

            android:background="@color/softGrey"
            android:layout_marginTop="5dp">
            <TextView
                android:id="@+id/ids"
                android:layout_width="40dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:layout_marginLeft="10dp"
                android:textStyle="bold"
                android:layout_gravity="center"
                android:text="ID"
                />

            <TextView
                android:id="@+id/descriptions"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                android:layout_marginTop="10dp"
                android:text="Bill Description"
                android:layout_gravity="center"
                />

            <TextView
                android:id="@+id/amounts"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                android:layout_marginTop="10dp"
                android:text="Amount (RM)"
                android:layout_gravity="right"
                />
        </GridLayout>


        <ListView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="5dp"
            android:id="@+id/listView" />

     </LinearLayout>
</ScrollView>

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fillViewport="true"
    android:background="@color/skyBlue"
    >

    <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:columnCount="3"
        android:rowCount="3"
        android:background="@drawable/border_style"
        android:layout_marginTop="5dp">
        <TextView
            android:id="@+id/id"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textStyle="bold"
            />

        <TextView
            android:id="@+id/amountBill"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textStyle="bold"
            android:layout_gravity="right"
            />
        </GridLayout>
</ScrollView>

function validation(id) {
  var value = document.getElementById(id).value;
  if (value === "" || value == null) {
    document.getElementById('Err' + id).innerHTML = "- Field Required";
    document.getElementById(id).classList.add('class');
    var label = findLabel(document.getElementById('Name'));
    label.classList.add('class');
  } else {
    document.getElementById('Err' + id).innerHTML = "";
    document.getElementById(id).classList.remove('class');
    var label = findLabel(document.getElementById('Name'));
    label.classList.remove('class');
  }
}

function findLabel(el) {
  var idVal = el.id;
  labels = document.getElementsByTagName('label');
  for (var i = 0; i < labels.length; i++) {
    if (labels[i].htmlFor == idVal)
      return labels[i];
  }
}

我添加了一个函数.class { background: #f97d7d; color: #ff0000; border: 1px solid #ff0000 !important; }来获取该输入的标签，并使用该函数将错误类添加到该标签。

Answer 2

首先，您需要扫描页面上的标签：

  var labels = document.getElementsByTagName('LABEL');
  for (var i = 0; i < labels.length; i++) {
    if (labels[i].htmlFor != '') {
      var elem = document.getElementById(labels[i].htmlFor);
      if (elem)
        elem.label = labels[i];
    }
  }

然后您可以在IF-ELSE条件中使用以下内容，

document.getElementById(id).label.classList.add('red-text');

和

document.getElementById(id).label.classList.remove('red-text');

我还为文本添加了CSS类为红色。

.red-text {
  color: #ff0000;
}

最终代码：

＆＃13;

function validation(id) {
  var labels = document.getElementsByTagName('LABEL');
  for (var i = 0; i < labels.length; i++) {
    if (labels[i].htmlFor != '') {
      var elem = document.getElementById(labels[i].htmlFor);
      if (elem)
        elem.label = labels[i];
    }
  }
  var value = document.getElementById(id).value;
  if (value === "" || value == null) {
    document.getElementById('Err' + id).innerHTML = "- Field Required";
    document.getElementById(id).classList.add('class');
    document.getElementById(id).label.classList.add('red-text');
  } else {
    document.getElementById('Err' + id).innerHTML = "";
    document.getElementById(id).classList.remove('class');
    document.getElementById(id).label.classList.remove('red-text');
  }
}

＆＃13;

.class {
  background: #f97d7d;
  color: #ff0000;
  border: 1px solid #ff0000 !important;
}

.red-text {
  color: #ff0000;
}

＆＃13;

<label for="Name">* Name <span class="error" id="ErrName"></span></label>
<input type="text" name="Name" id="Name" onblur="validation('Name')">

＆＃13;

Answer 3

跨度被定义为类“错误”，但您尚未定义该类。

验证表格

3 个答案: